ul -> a规则不应影响儿童ul -> a

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)也被改变了。如何防止这种情况，并只更改current-cat的父current-cat

Answer 1

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

子组合器(>)位于两个CSS选择器之间。它只匹配第二个选择器匹配的元素，这些元素是第一个元素匹配的子元素。

文档

​

.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 ...)，因为您只提供了来自ul元素的ul结构。

Answer 2

您可以使用将阻止继承的>：

  #outer-section .outer-div ul .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>