css匹配子代的第一个元素怎么写

html-css017

css匹配子代的第一个元素怎么写,第1张

:first-child /* 匹配第一个元素 */

举例：（parent下的第一个子元素字体变红色）

.parent > :first-child {color:red} <div class="parent">

    <p>子元素1</p>

    <div>子元素2</div>

    <span>子元素3</span>

</div>

在开发中，需要这样一个需求，需要找到第n个孩子元素。一时想不起来应该怎么写，经过查阅后得知。

因此记录一下，以免日后再忘记。

:nth-child 是CSS伪类，它首先找到所有当前元素的兄弟元素，然后按照位置 先后顺序从1开始排序 ，选择的结果为CSS伪类:nth-chilid括号中表达式（an+b）匹配到的元素集合。（n=0,1,2,3）。

tr:nth-child(2n+1)

表示表格中的奇数行

tr:nth-child(odd)

表示表格汇总的奇数行

tr:nth-child(2n)

表示表格中的偶数行

tr:nth-child(even)

表示表格中的偶数行

span:nth-child(0n+1)

表示子元素中第一个且为span的元素，与:first-child选择器的作用相同

span:nth-child(-n+3)

匹配前三个子元素中的span元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

css2里的伪类均摊符，意思是：匹配父元素的第一个子元素

你可以在css手机里可以查到这个伪类选择符

比如：

<ul>

<li>列表项一</li>

<li>列表项二</li>

<li>列表项三</li>

<li>列表项四</li>

</ul>

在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。其它相关的伪类都如此。