CSS Selection属性

Question

假设常绿，水果和叶子类没有在页面的其他地方使用。什么选择器将选择苹果树，但没有其他选择？

<ul id="forest">
 <li class="evergreen"><a>pine</a></li>
 <li class="evergreen"><a>lodgepole</a></li>
 <li class="evergreen fruit"><a>holly</a></li>
 <li class="leaf fruit"><a>apple</a></li>
 <li class="leaf"><a>oak</a></li>
 <li class="leaf"><a>maple</a></li>
</ul>

Answer 1

您可以像这样选择苹果树：

#forest .leaf.fruit {
    font-weight: bold;
}

但也许你可以使用更具体的类名

Answer 2

用于选择CSS：

.leaf.fruit{
  background-color:red;
}

安全的方法是引用ul：#forest > .leaf.fruit{

这只适用于这种情况，因为您没有任何元素同时分配了leaf和fruit类

CSS的其他选项：

根据https://stackoverflow.com/a/1520501/9167318

如果您将标记更新为：
<li class="leaf fruit" fruit='apple'><a>apple</a></li>

要选择文本为apple的节点，您可以使用：

li[fruit*='apple']{
  background-color:red;
}

Answer 3

这样做：

li[class="leaf fruit"] {
  color:red;
}

<ul id="forest">
 <li class="evergreen"><a>pine</a></li>
 <li class="evergreen"><a>lodgepole</a></li>
 <li class="evergreen fruit"><a>holly</a></li>
 <li class="leaf fruit"><a>apple</a></li>
 <li class="leaf"><a>oak</a></li>
 <li class="leaf"><a>maple</a></li>
</ul>

Answer 4

替代解决方案

li:not(.evergreen).fruit

Answer 5

.leaf.fruit

这是edx css选择器的答案，这是正确的答案

Answer 6

ul#forest li.leaf.fruit a{
   color: red;
}