仅更改列表中顶部第一个锚点的样式

Question

我想更改具有文本父级 1 的 ul 元素内第一个锚点的颜色

这是我的网页

<ul class="Active">
<li>
<a>Parent 1</a>
<ul>
    <li><a>Child 1.1</a></li>
    <li><a>Child 1.2</a></li>
     <li><a>Child 1.3</a></li>
    <li> <a>Child 1.4</a></li>
</ul>
</li>
</ul>

这是我的 CSS

.Active a:first-of-type{
  color:red;
}

小提琴

Answer 1

要获取父ul的直系后代的第一个类型，请尝试以下操作：

.Active > li:first-of-type > a {
  color: red;
}

>选择器将仅针对直接子元素，而不是"孙子"，因此它针对作为.Active的直接后代的第一个li元素，然后获取作为其直接子级的任何a元素。
（first-of-type只会将颜色应用于第一个li，以防万一它在你的实际代码中可能有更多的子项）。

.Active > li:first-of-type > a {
  color: red;
}

<ul class="Active">
  <li>
    <a>Parent 1</a>
    <ul>
      <li><a>Child 1.1</a></li>
      <li><a>Child 1.2</a></li>
      <li><a>Child 1.3</a></li>
      <li> <a>Child 1.4</a></li>
    </ul>
  </li>
</ul>

Answer 2

仅在根级别：

.Active > li > a {
  color: red;
}

Answer 3

使用这个。还要尝试以小写字母开头的类名。这是更好的做法。

   .Active li ul li:first-child a { 
      color:red;
    }

Answer 4

您可以使用 ：first-child 选择器来完成此操作。

.Active ul > :first-child {
  color:red;
}

<ul class="Active">
<li>
<a>Parent 1</a>
<ul>
    <li><a>Child 1.1</a></li>
    <li><a>Child 1.2</a></li>
     <li><a>Child 1.3</a></li>
    <li> <a>Child 1.4</a></li>
</ul>
</li>
</ul>

希望对您有所帮助。干杯！