CSS选择器:last-child

:first-child

定义：必须是其父元素下的第一个子元素

li:first-child {
    color: aquamarine;
}

<body>
  <li>我是第一个li元素,我能匹配，因为我是li元素并且是body下的第一个</li>
  <li>我是第二个li元素</li>
  <ul>
    <li>我是第一个li元素, 我能匹配，因为我是ul下的第一个li</li>
    <li>我是第二个li元素</li>
    <li>我是第三个li元素</li>
  </ul>
  <li>我是第一个li元素</li>
  <li>我是第二个li元素</li>
</body>

:first-of-type

定义: 其父元素下想同类型子元素中的第一个

li:first-of-type {
    color: blueviolet;
}

<body>
  <p>我是干扰项</p>
  <li>我是第一个li元素,我能匹配，因为我是body下的第一个li</li>
  <li>我是第二个li元素</li>
  <ul>
    <li>我是第一个li元素, 我能匹配，因为我是ul下的第一个li</li>
    <li>我是第二个li元素</li>
    <li>我是第三个li元素</li>
  </ul>
  <li>我是第一个li元素</li>
  <li>我是第二个li元素</li>
</body>

:nth-of-type(n)

同 first-of-type 但是可以指定位置

:nth-child(n)

父元素中子元素为第一的元素

取值可以是，2n+1 || odd 奇数行、2n || even 偶数行，n+1 大于1的

:last-child

定义：必须是其父元素下的最后一个子元素

li:last-child {
    color: red;
}

<body>
  <li>我是第一个li元素</li>
  <li>我是第二个li元素</li>
  <ul>
    <li>我是第一个li元素</li>
    <li>我是第二个li元素</li>
    <li>我是第三个li元素, 我能匹配，因为我是ul下的最后一个li</li>
  </ul>
  <li>我是第一个li元素</li>
  <li>我是第二个li元素,我能匹配，因为我是li元素并且是body下的最后一个，后面有一个script标签都不行</li>
</body>

:last-of-type

原理同:first-of-type

:nth-last-of-type

原理同:nth-of-type(n)

:nth-last-child(n)

原理同:nth-child(n)

上一页CSS 常用代码片段

最后更新于1年前