css结构伪类选择器对类名是否适用的简单探讨

重复一下昨天留下来的疑问：
上一篇所讲的选择器都是以标签为基础进行选择的，那么能不能给标签加上统一的类名，选择器会对类名起作用吗！？！
比如这样.item:nth-child(n+3)
再或者这样的.item:nth-of-type(3)
以-of-type结尾的选择器原理就是先筛选标签，那么遇上类名会发生什么？！？

陷入沉思ing ~ - ~

最终结论👇

经过我的简单测试，首先告诉大家的是：结构伪类选择器对类名同样适用。以-of-type结尾的选择器也适用，是的，没错~

具体情况请继续往下看：

以-child结尾

为了完成今天的测试，在昨天的代码基础上又给每个子元素加上了统一的类名item。

<ul class="nav">
    <div class="item">1</div>
    <li class="item">2</li>
    <div class="item">3</div>
    <li class="item">4</li>
    <div class="item">5</div>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
</ul>

-child结尾的选择器原理是先确定子元素位置，再看当前位置子元素标签类型是否符合。
一顿测试之后可得出一下结论：
单纯的把标签换成类名对-child结尾的选择器没啥影响，只是第二步检查的换成了类名而已，选择器效果依旧。
这里就只放一个测试组了，其他的不再赘述。

.item:nth-child(-n+4) {
        color: #fff;
        background-color: red;
    }

以-of-type结尾

上一篇我们讲到：这组选择器原理就是以标签为基础。那么现在换成类名，他该怎么工作呢？
布吉岛，直接上测试！！
先来两个简单的：
① :first-of-type

.item:first-of-type {
        color: #fff;
        background-color: red;
    }

② :last-of-type

.item:last-of-type {
        color: #fff;
        background-color: red;
    }

嗯！？！神马情况？为什么都是选中了两个？？这俩不是单目标选择器吗？
让我们来找找规律：

选中了 1 和 2 ，选中 1 是应该的呀？ 2 是干哈的？
等等，我懂了！哈哈
如果说还是看标签，那么就说的通了，之所以会选中两个子元素，是因为现在子元素中是有两种标签的，分别是 1 ， 3 ， 5 的 div 标签：

<div class="item">1</div>
<div class="item">3</div>
<div class="item">5</div>

2 ，4 ， 6 ， 7 ， 8 的 li 标签：

<li class="item">2</li>
<li class="item">4</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>

1 ，2 确实分别是他们的第一个子元素， 5 和 8 也正好都是他们的最后一个子元素！
我真他娘是个天才~ 哈哈嗝 ~🐶赶紧去试试别的几个——

③ :last-of-type
先来个简单的验证一下：

 .item:nth-of-type(2) {
        color: #fff;
        background-color: red;
    }

我猜选中 3 和 4 ，去看一哈

哎，果然如此！再来一个复杂的：

.item:nth-of-type(odd) {
        color: #fff;
        background-color: red;
    }

额…这什么东西？？？

还记得吗？odd关键字是奇数的意思。先理性分析一波：
div标签中属于奇数位置下标的有1，5；li标签中分别是位于1，3，5位的2，6，8，所以加起来一共是1，2，5，6，8，嘿嘿，完美命中！

④ :last-of-type

  .item:nth-last-of-type(n+3) {
        color: #fff;
        background-color: red;
    }

1，3，5的倒数第三个是1，往前数没了；2，4，6，7，8的倒数第三个是6，往前全选中，6，4，2。组合起来就是1，2，4，6。

对了，还有两个没测试，:not()和:only-of-type。一块来吧~
⑤ :not()+:only-of-type

.item:not(:only-of-type) {
        color: #fff;
        background-color: red;
    }

哇偶，全选！也是，两组标签都不唯一，所以反选就是全部。

最终结论详解

详细阐述一下开头的结论：所有的结构伪类选择器对类名同样适用。

以:-child结尾的选择器对标签和类名的表现效果相同，从选择器的效率上看，类名选择器的效率是高于标签选择器的，所以更推荐使用类名。

以:-of-type结尾的选择器面对类名时，如果子元素标签统一，则效果和之前一样；如果子元素标签都多种，使用类名就相当于是没指定标签，所以默认所有的标签类型都参与选择，最终结果就是各个标签组的选择结果之和。

---

全剧终~
学习就该有这种打破砂锅问到底的干劲儿，一次性都弄懂。
希望能对你们的学习有所帮助！

总结不易，如果可以，请素质四连，🦀蟹蟹啦🦀