Question

我想更改 ul 元素中第一个锚的颜色，该元素包含文字父1

这是我的 html

<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;
}

Fiddle

Answer 1

要获得父ul的直接后代的第一个类型，请尝试以下方法：

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

>选择器仅定位直接子项，而不是“孙子”，因此它定位于{em> li元素，该元素是{{1}的直接后代}，然后获取任何.Active元素作为其直接子元素。
（a仅将颜色应用于第一个first-of-type，以防万一在你的实际代码中有更多的孩子）。

li

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

Answer 2

仅限根级别：

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

Answer 3

使用它。还尝试用小写字母开始你的类名。这是更好的做法。

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

Answer 4

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望它有所帮助。干杯！

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

4 个答案: