HiDocs
Search K

Appearance

一文搞懂nth-child及特殊伪类 ​

1.实现奇偶选择 ​

注意：其实写法很简单，只是把括号里面的内容加个n，n代表非负整数0、1、2、3…

并且本质上:nth-child的()里面的参数可以是一个正整数，也可以是an+b这样的表达式，其中 a 和 b 都是整数，且 n 表示索引

  1. 如果你想选择奇数位置的子元素，可以使用 :nth-child(2n+1) 或者 :nth-child(odd)
css
:nth-child(2n+1) /*注意：是使用()包裹，而不是使用[]*/
/*或者*/
:nth-child(odd)

这个选择器表示选择父元素下奇数位置的子元素。具体来说，它选择的是第 1、3、5、7... 个子元素。

  1. 如果你想选择偶数位置的子元素，可以使用 :nth-child(2n) 或者 :nth-child(even)
css
:nth-child(2n)
/*注意：:nth-child(2n+2) 也是可以的*/
/*或者*/
:nth-child(even)

这个选择器表示选择父元素下偶数位置的子元素，即第 2、4、6、8... 个子元素。

2.选择前n个，和后m个（两侧范围选取） ​

html
<div class="container">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">...</div>
    <div class="cell">...</div>
    <div class="cell">-2</div>
    <div class="cell">-1</div>
</div>

让前两个子元素和最后两个子元素文字是红色的如何实现？

css
.cell:nth-child(-n+2), .cell:nth-last-child(-n+2) {
  color: red;
}

在 CSS 中，nth-child() 和 nth-last-child() 是伪类，用于选择元素在其父元素中的位置。这里是它们的含义：

  • nth-child(-n+2): 选择父元素中的前两个子元素。其中，n 表示子元素的索引（从 1 开始），而 -n+2 表示索引小于等于 2 的子元素。所以这个选择器选择了前两个子元素。

    解释：由于n=0,1,2,3…，所以-n+2的值会是2,1,0,-1,-2…，从0开始的负数都是无法生效的！所以实现了选择索引<=2的元素

  • nth-last-child(-n+2): 选择父元素中的最后两个子元素。与前面类似，-n+2 表示索引小于等于 2 的子元素，但这次是从末尾开始数。

    解释：由于n=0,1,2,3…，所以-n+2的值会是2,1,0,-1,-2…，从0开始的负数都是无法生效的！并且nth-last-child是从后往前数的，所以实现了选择索引最后两位的元素

:nth-last-child(an+b)

nth-last-child() 是一种 CSS 伪类，用于选择父元素的倒数第几个子元素。与 nth-child() 选择器类似，但是它从父元素的末尾开始计数。

这个伪类的语法是 :nth-last-child(an+b)，其中 n 表示索引，a 和 b 是整数。这个选择器会匹配满足 an+b 条件的子元素。

nth-child的()里面如果是负数会生效吗？

对于 CSS 中的 nth-child() 伪类，括号中的表达式应该是一个正整数或者是一个数学表达式。负数在 nth-child() 中是不被支持的，这意味着你不能在括号中使用负数。

nth-child() 的语法是 :nth-child(an+b)，其中 a 和 b 都是整数，且 n 表示索引。因此，nth-child() 伪类的目的是选择父元素中特定位置的子元素，而负数在这个上下文中没有意义。

如果你想选择特定位置的子元素，但它们的位置是负数，那么你可能需要考虑其他的选择器或者使用 JavaScript 来处理。例如，你可以考虑使用 :nth-last-child() 来选择倒数位置的子元素。

3.选择除了前n个，和后m个（中间范围选取） ​

html
<div class="container">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">...</div>
    <div class="cell">...</div>
    <div class="cell">-2</div>
    <div class="cell">-1</div>
</div>

怎么让除了前两个子元素和最后两个子元素文字是红色的？

css
.cell:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) { /*除了前两个，再除了最后两个*/
/*注意：选择器是可以连用的！*/
  color: red;
}

not的用法：

not() 是 CSS 中的一个伪类，用于排除（或否定）满足某个选择器条件的元素。它可以在选择器中用来选择除了指定条件外的其他元素。

()里面可以是任意的选择器，同时也可以是伪类选择器！

4.其他的特殊伪类 ​

1.has ​

has 伪类的语法类似于 :not() 伪类，但是它允许你选择包含特定子元素的父元素。这样可以在 CSS 中实现一些以前需要使用 JavaScript 才能实现的选择器逻辑。

has的()里面同样可以是任意的选择器！

css
/* 假设HTML结构如下： */
/* <div class="parent">
       <span class="child">Hello</span>
   </div> */

/* 选择包含特定子元素的父元素 */
.parent:has(.child) {
  background-color: lightblue;
}

2.:nth-of-type()、:first-of-type、:last-of-type ​

这三者其实和nth-child，first-child，last-child非常相似，在某些情况下二者的作用是完全一样的！

并且二者的写法也一样，都是选择器:nth-xxx这种的，并且都是用在子元素上面的，而不是用在父元素上面！

首先明确：nth-child系列的用法是有缺陷的

nth-child选择器会选择父元素下的第n个子元素，无论其类型是什么。这意味着它会考虑所有子元素，无论其标签类型如何。但是选择了之后它又会和前面定义的标签进行比较，如果说不一样，那么这个样式就直接不生效了！

例子：

html
  <style>
    .container p:nth-child(2) { /*无法生效*/
      color: red;
    }

    .container p:nth-of-type(2) { /*可以生效*/
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <p>First paragraph</p>
    <span>First span</span>
    <p>Second paragraph</p>
    <span>Second span</span>
    <p>Third paragraph</p>
  </div>

</body>

为什么p:nth-child(2)不生效呢？

因为p:nth-child(2)选择到了第二个子元素，也就是span标签，经过对比发现不是p标签，所以无法生效！

为什么p:nth-of-type(2)可以生效呢？

nth-of-type选择器会选择父元素下特定类型的元素集合中的第n个元素。它只会考虑与指定的元素类型相同的子元素。

所以可以确保选择到的元素一定是我们要找的元素，允许子元素的类型不同！

其他的用法跟nth-child完全一样的

二者分别在什么情况下生效？

nth-child：子元素在选择器要选择的范围内，没有发生标签混合的情况，即到第2个及其之前都是p标签！

html
<style>
    .container p:nth-child(2) {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <span>Second span</span>
    <p>Third paragraph</p>
  </div>

nth-of-type：

在任何情况下都可以生效，尤其是标签出现混合的情况，可以精准找到我们想要的标签！

在标签不混合的情况下，和nth-child没什么区别！

那么nth-child如何解决标签混合会不生效的情况？

给每一个不同的标签定义相同的class，然后用class选择器+伪类nth，而不直接用属性标签，就可以了！

3.:empty ​

:empty: 选择没有子元素或者只有空白文本的元素。

4.:focus、:hover、:active、:link、:visited、:checked ​

  1. :focus: 选择当前获得焦点的元素，通常在用户点击元素或使用键盘导航时触发。

    一般用于input标签

  2. :hover: 选择鼠标悬停在元素上时的状态。

  3. :active: 选择用户点击元素时的状态，通常在点击下的瞬间触发。

    主要用于a标签或者button标签

  4. :link： 是用于选择尚未被访问过的链接（即默认状态下的链接）的 CSS 伪类

    主要用于a标签

  5. :visited: 选择用户已经访问过的链接的状态。

    主要用于a标签

  6. :checked: 选择被选中的表单元素，例如复选框或单选按钮。

​ 主要用于radio和select