Question

我的类别具有以下链接结构：

<ul>
  <li class="current-cat cat-parent">
    <a href="#">Parent-Cat</a>
    <ul class="children">
      <li class="cat-item cat-item-71">
        <a href="#">Children-Cat</a>
      </li>
    </ul>
   </li>
 </ul>

现在，我只希望current-cat类更改其a元素的颜色：

#outer-section .outer-div ul .current-cat a {
  color: red;
}

问题在于，子级（cat-item cat-item-71）也被更改了。如何防止这种情况，仅更改a的父current-cat？

Answer 1

使用直接子选择器：.foo > .bar

子组合器（>）放在两个CSS选择器之间。它仅匹配第二个选择器匹配的元素，这些元素是第一个选择器匹配的元素的子元素。

Documentation

.current-cat > a {
  color: red;
}

 <ul>
  <li class="current-cat cat-parent">
    <a href="#">Parent-Cat</a>
    <ul class="children">
      <li class="cat-item cat-item-71">
        <a href="#">Children-Cat</a>
      </li>
    </ul>
   </li>
 </ul>

请注意，由于您只提供了(#outer-section .outer-div ...)元素的HTML结构，因此我没有在示例中使用整个选择器ul。

Answer 2

您可以使用>来阻止继承：

ImageButton

ul->一条规则不应影响孩子ul-> a

2 个答案: