div~div和div之间的区别:not(:first-of-type)？

Question

有没有之间的差异div~div和div:not(:first-of-type)？除了IE6之外,无论出现什么错误,是否存在他们会做不同事情的情况？

Answer 1

在匹配元素方面,没有区别.任何在同一父级div中跟随其他div父级的东西,必然不是其父级中的第一个类型元素div.

如果兄弟选择器是+和否~,则div+div具有以下元素必须紧接在前一元素之后出现的附加条件.事实并非如此~- 两者之间可能出现任何其他类型的兄弟姐妹.

如果伪类是:first-child和否:first-of-type,那么如果其父级中的第一个不是它的第一个子级,那么它div:not(:first-child)仍将匹配.div:first-of-typediv

这是一个例子:

<section>
    <div></div> <!-- div:first-child or div:first-of-type -->
    <div></div> <!-- div+div or div~div or div:nth-of-type(2) -->
    <p></p>
    <div></div> <!-- div+p+div or div~div or div:nth-of-type(3),
                     but not div+div -->
</section>
<section>
    <h1></h1>   <!-- h1:first-child -->
    <div></div> <!-- div:first-of-type or div:nth-child(2) -->
    <div></div> <!-- div~div or div:nth-of-type(2) or div:nth-child(3) -->
</section>

就特异性而言,存在差异.如果你有两个选择器匹配相同元素的CSS规则,那么div:not(:first-of-type)由于:first-of-type伪类将优先.请注意,:not()本身不计算 - 只考虑其参数.

这是另一个例子:

div {
    float: left;
    width: 50px;
    height: 50px;
    margin: 5px;
    border: 1px solid red;
}

/* 1 pseudo-class, 1 type -> specificity = 0-1-1 */
div:not(:first-of-type) {
    border-color: green;
}

/* 2 types                -> specificity = 0-0-2 */
div ~ div {
    border-color: blue;
}

<section>
    <div></div>
    <div></div>
    <div></div>
</section>