详解css3中的:nth-of-type(n)

曾经终败给现在 2022-05-23 07:29 142阅读 0赞

该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯

:nth-of-type() CSS 伪类   匹配同类型中的第n个同级兄弟元素。

先来看个简单的例子理解一下上面的意思：

HTML代码如下

<div id="wrap">
        <p>one</p>
        <div>我是div</div>
        <p>two</p>
        <p>three</p>
        <p>four</p>
        <p>five</p>
        <p>six</p>
    </div>

css代码如下：

猜猜结果，变红的是哪个？

首先肯定是p标签里的背景变红，通俗一点理解p:nth-of-type(3)代表的就是，所有兄弟节点中找标签为p的，然后找到的第三个p标签背景为红色

所以，three背景为红咯

注意：不要和:nth-child(n)搞混了，上面的背景变黄的是two，因为，该选择器是找父元素的第三个子元素，如果该子元素为p，则其变为黄色，如果，第三个子元素不是p元素，则没有子元素的背景变为黄色

ok，回到我们今天讨论的重点:nth-of-type(n)

:nth-of-type(n)：n可以是一个数字，一个关键字，或者一个公式。

数字，我就不多说了，注意是从1开始的哦（不是从0）

关键字：可选的有：odd（奇数）、even（偶数）

#wrap p:nth-of-type(even) {
                background: red;
            }

此时，背景变为红色的就是two、four、six啦

公式：使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

怎么理解呐？

比如像上面的想要让偶数p变为红色背景，那么用公式就是：

#wrap p:nth-of-type(2n) {
                background: red;
            }

效果和上面的一样。

个人还是比较喜欢用公式的，功能真的很强大，比如我们想要让奇数的变红公式就是2n+1喽，想要让3的倍数的变红，公式就是3n啦，依次类推。

哦，说说一下，兼容性

<table style="border:0px;margin:0px;padding:0px;width:729.333px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="border-top:0px;margin:0px;padding:0px;"> 
   <th style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:16px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;width:135.333px;">选择器</th> 
   <th title="Chrome" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_chrome.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; Chrome</th> 
   <th title="Internet Explorer / Edge" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_edge.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; IE</th> 
   <th title="Firefox" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_firefox.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; Firefox</th> 
   <th title="Safari" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_safari.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Safair</th> 
   <th title="Opera" style="border-color:rgb(212,212,212);margin:0px;padding:5px;font-size:13px;height:32px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_opera.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Opera</th> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;vertical-align:top;min-width:25px;width:135.333px;">:nth-of-type()</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">4.0</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">9.0</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">3.5</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">3.2</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;text-align:center;vertical-align:top;">9.6</td> 
  </tr> 
 </tbody> 
</table>

嗯、其实整理完，也很简单啦，希望看完的你也有这样的感觉。