:last-of-type 和 :first-of-type的误用

大兄弟 2018年06月22日0   221

上一篇中曾提到,someselecttor:last-chid 所表示的并不是someselecttor选中的节点集合的最后一个。那么,怎么达到这个效果呢?对,可以用:last-of-type。来个例子试试看吧!

<style>
        .section{
            margin-bottom: 50px;
        }
        .section1-item:last-of-type{
            color: green;
        }
</style>
<section class="section section1">
    <header>header</header>
    <p class="section1-item">111</p>
    <p class="section1-item">222</p>
    <p class="section1-item">333</p>
    <p class="section1-item">444</p>
    <footer>footer</footer>
</section>

果然,把<p class="section1-item">444</p>给加上了绿色。不过,当我们把上面代码片段中的<footer>footer</footer>也加上 class="section1-item",问题来了,居然给<p class="section1-item">444</p>和<footer class="section1-item">footer</footer>所标示的两个元素都给加上了绿色!

我们继续把上面的HTML代码片段进行修改,改成:

<section class="section section1">
    <header>header</header>
    <p class="section1-item">111</p>
    <p class="section1-item">222</p>
    <p class="section1-item">333</p>
    <footer class="section1-item">444</footer>
    <footer class="section1-item">footer</footer>
</section>

即只是把<p class="section1-item">444</p>改成了<footer class="section1-item">444</footer>,而CSS样式不作修改。当再次预览效果的时候,发现被加上绿色的元素分别是<p class="section1-item">333</p>和<footer class="section1-item">footer</footer>。这下答案就很明显了:

someselector:last-of-type不仅与someselector这个选择器相关,还与符合该选择器的元素的标签相关。

再看一下W3C的说明:

The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element.

这里所谓 the last sibling of its type其实讲得并不是很清楚,但仔细琢磨,这里的type的意思应该就是不仅仅与选择器相关,还与标签相关。

这时,你可能已经想到了,:first-of-type肯定也有类似的问题。的确,如你所料。

有了这一篇和上一篇的经验,遇到那不太准的CSS选择器,先进行如下处理:

1、翻一下W3C的说明

2、试验一下