css3 第一个匹配的元素

CSS3 第一个匹配的元素

:first-child 选择器用于选择父元素的第一个子元素。如果该子元素为其父元素的唯一子元素，则该选择器将选择该唯一子元素。

例如，以下 CSS 代码将选择列表中的第一个列表项：

ul li:first-child {
    background-color: yellow;
}
    

它所选择的 HTML 代码如下：

ul>
    li>
    第一个元素/li>
    li>
    第二个元素/li>
    li>
    第三个元素/li>
    /ul>
    

在上述 HTML 代码中，只有第一个 li> 元素符合 :first-child 选择器。

此外，:first-child 选择器也可以与其他选择器组合使用。例如，以下代码会选择第一个 p> 元素的所有直接子元素：

p:first-child >
 * {
    color: red;
}
    

它所选择的 HTML 代码如下：

p>
    span>
    这个元素将变成红色的，因为它是 p 元素的第一个子元素。/span>
    strong>
    这个元素不会变成红色的，因为它不是 p 元素的第一个子元素。/strong>
    /p>
    

在上述 HTML 代码中，只有第一个 span> 元素符合 :first-child 选择器。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！