css - CSS 选择器：设置 div 中第一个“a”的样式

Question

我无法找到正确的 CSS 选择器，我的结构如下所示：

<div>
    <a href="#"></a>
</div>
<div>
    <a href="#"></a>
</div>
<div>
    <a href="#"></a>
</div>

我想设置a第一个元素的样式div

我试过这个选择器但没有运气

div:first-child a{}

score 2 · Accepted Answer

first-child应该工作得很好，你可以试试

div:nth-of-type(1) a { /* Or div:first-child a */
    color: red;
}

上面的选择器将选择所有第一个div元素并将颜色应用于a第一个内部的所有元素div

如果您愿意a在每个div标签中设置第一次出现的样式而不是您需要使用

div a:nth-of-type(1) { /* Or div a:first-child */
    color: red;
}

这里每一个标签a都会被选中div

最后但并非最不重要的一点是，如果您只想a在 1st中选择 1stdiv而不是使用下面的选择器

div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
    color: red;
}

注意：如果上述选择器仍然不起作用，则可能是某些规则比您声明的规则更具体，或者!important在某处使用，或者（最不可能）您正在旧浏览器上进行测试

score 0 · Accepted Answer

第一个 div 将被选中并全部a接收颜色#CCC。我不明白为什么这不起作用。

div:first-child a { 
    color: #CCC;
}

否则测试这个解决方案，它选择第一个 div 并设置 div 中第一个 a 标签的样式：

div:first-child a:first-child(1) {
    color: #CCC;
}

否则，选择器有问题，请:first-child使用:nth-of-type({ number expression | odd | even })选择器。

score 0 · Accepted Answer

你自己的例子也很有效。

div:first-child a {
    color: #f00;
}

3 回答 3