关于nth-child的疑惑

最新推荐文章于 2024-04-19 11:27:49 发布

原创最新推荐文章于 2024-04-19 11:27:49 发布 · 860 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文通过实例解析了 CSS 中的 :nth-child() 选择器的工作原理，特别是其如何应用于不同层级的元素，以及如何正确指定公式来选择目标元素。

正好很久没写代码了，也想试试回答下这个问题，于是就搜索了下，于是就找到了 W3School的CSS3 :nth-child() 选择器，看到了这样一个代码：

p:nth-child(-n+3){
	background:#ff0000;
}

class="editr__result active" name="editr_09a81fc" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 478.797px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; left: 319.188px; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

       1
      
       2
     
       3
     
       4
      
       5
      
       6
     
       7
     
       /* @reset */
      
       body
       {
       background-color:
       #FFFFFF;
       }
      
       /* ==== demo ==== */
      
       p
       :nth-child(
       -n+
       3)
       {
      
       background:
       #ff0000;
      
       }

感觉有点奇怪，我原本以为应该会是前三个段落被选中，像这样：

class="editr__result active" name="editr_4389dc4" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 798px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

一定是哪里不对了。来看看它的说明：

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。

MSN文档对:nth-child的说明：

伪类:nth-clild(an+b)匹配在文档树中前面有an+b-1个兄弟元素的元素，此时n大于或等于0，并且该元素具有父元素。简而言之，该选择器匹配多个位置满足an+b的子元素。

span:nth-child(-n+3) 匹配前三个子元素中的span元素。

注意到一个特点——“具有父元素”，于是我们给这个例子中的<p>加个父元素试试：

class="editr__result active" name="editr_ff56209" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 478.797px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; left: 319.188px; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

      1
      
      2
     
      3
     
      4
      
      5
      
      6
     
      7
     
       /* @reset */
      
       body
       {
       background-color:
       #FFFFFF;
       }
      
       /* ==== demo ==== */
      
       p
       :nth-child(
       -n+
       3)
       {
      
       background:
       #ff0000;
      
       }

element:nth-child(an + b) { /*规则*/ }

成功。也就是说nth-child从最大的父元素”body”开始，匹配“an+b”个元素，如果里面包含”element”，则对其应用样式规则。

class="editr__result active" name="editr_3bc4dac" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 478.797px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; left: 319.188px; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

       1
      
       2
     
       3
     
       4
      
       5
      
       6
     
       7
     
       /* @reset */
      
       body
       {
       background-color:
       #FFFFFF;
       }
      
       /* ==== demo ==== */
      
       p
       :nth-child(
       -n+
       3)
       {
      
       background:
       #ff0000;
      
       }

以上，如果你想更可控的应用到“element”元素上，可以试试：

p:nth-of-type(-n+3){
	background:#ff0000;
}

class="editr__result active" name="editr_f9834b8" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 478.797px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; left: 319.188px; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

      1
      
      2
      
      3
     
      4
     
      5
     
      6
      
      7
      
      8
     
      9
     
      10
     
       /* @reset */
      
       body 
       {
      
       background-color: 
       #FFFFFF;
      
       }
      
       /* ==== demo ==== */
      
       p
       :nth-of-type(
       -n+
       3) 
       {
      
       background: 
       #ff0000;
      
       }