Question

<span class="yellowTiger">&nbsp;</span>
<a class="yellowIceTiger">&nbsp;</a>
<div class="yellowCow">&nbsp;</div>
<b class="yellowApe">&nbsp;</b>
<c class="yellowIce">&nbsp;</c>

如何选择以黄色或冰块开头的所有课程？我知道有可能不记得..

修改:: 为什么不分开课，因为我不喜欢：p

Answer 1

使用starts with css选择器^=，而不是选择类作为属性：

[class^="yellow"] {
  background-color: yellow;
}
[class^="blue"] {
  background-color: blue;
}
[class^="red"] {
  background-color: red;
}

<span class="yellowTiger">&nbsp;</span>
<a class="yellowIceTiger">&nbsp;</a>
<div class="yellowCow">&nbsp;</div>
<div class="bluewCow">&nbsp;</div>
<div class="redwCow">&nbsp;</div>
<b class="yellowApe">&nbsp;</b>
<c class="yellowIce">&nbsp;</c>

但是（如果我错了，请纠正我）当你将各个班级作为小组.yellow

时，选择yellow ice tiger要慢一些

Answer 2

在html元素中，当在class属性中的2个单词之间给出空格时，该元素被认为属于这两个类。所以重组这样的课程......

<span class="yellow tiger">&nbsp;</span> 
<a class="yellow ice tiger">&nbsp;</a>
<div class="yellow cow">&nbsp;</div>
<b class="yellow ape">&nbsp;</b>
<c class="yellow ice">&nbsp;</c>

第一个<span>元素属于两个类，yellow和tiger。同样，<a>元素属于所有三个类，yellow，ice和tiger

现在使用.yellow选择器选择类yellow的所有元素。由于此示例中的所有元素都具有类yellow，因此将选择所有元素。

.yellow {
    / *Whatever styling you want */
}

另一个例子就是说清楚：

要选择班级ice的所有元素，例如<a>和<c>，请使用.ice。

.ice { /* This selects the <a> and <c> elements */

}

Answer 3

就像@Justinas所说，一个解决方案是创建一个类“黄色”和一个类“冰”。然后你可以创建这样的东西。

<span class="yellow Tiger">&nbsp;</span>
<a class="yellow Ice Tiger">&nbsp;</a>
<div class="yellow Cow">&nbsp;</div>
<b class="yellow Ape">&nbsp;</b>
<c class="yellow Ice">&nbsp;</c>

通过这种方式，你可以将冰风格分配给有冰和黄色风格的元素给那些黄色作为类的人

如何选择以Yellow开头的所有类

3 个答案: