Question

是否可以为类的h2文本设置条件？ h2没有唯一的类或id，以及具有动态变化顺序的多个h2。所以我不能说第3个h2，因为它总是在变化。

h2.arker.fun.header {
// some statement If h2 text = "Gamer" then set text-transform: lowercase
}

Answer 1

曾经提出过一个称为：contains 的伪类来处理这种情况。但是他们还没有在目前的CSS3草案中添加它。

但是你可以使用一些Javascript。例如，处理这个问题

for (var i= document.links.length; i-->0;){
    if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
        document.links[i].style.color= 'red'; }

希望你不要被限制使用Javascript。

Answer 2

正如其他人（@Paulie_D，@ Maria Marks，@ YourFriend）已经指出的那样，没有CSS＆lt; 4基于内容的选择器和你可以得到的最接近的是属性选择器。

只是一个疯狂的想法：

h2.arker.fun.header:before {
  content: attr(data-text);
}

h2.arker.fun.header[data-text="Gamer"] {
  text-transform: lowercase;
}

<h2 class="arker fun header" data-text="Gamer"></h2>

不要在家里做...

Answer 3

你可以在那个h2标签中添加属性并把条件如下： h2 [if =＆＃39; mytype＆＃39;] {text-transform：lowercase;}

CSS条件h2文本

3 个答案: