知道属性选择器和伪类选择器的优先级吗

[问答题]

知道属性选择器和伪类选择器的优先级吗

sunnyww

优先级依次降低：

!important

内联

id选择器

类伪类属性选择器

元素（标签）伪元素选择器

继承通配符选择器

发表于 2019-09-03 20:13:33 回复(0)

拯救世界的光太郎

CSS选择器的优先级顺序（由高到低）：

!important（优先级最高）
id 选择器
class选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器
通配符选择器、关系选择器（优先级最低）

科普：伪元素选择器与伪类选择器的区别

伪元素选择器抽象创造了新元素，而伪类选择器没有。
伪类选择器只能使用“ : ”，而伪元素选择器可以使用“ : ”或“ :: ”。
伪类选择器是类似于添加类所以可以是多个；而伪元素选择器在一个选择器中只能出现一次，并且只能出现在末尾。
所有伪类选择器实现的效果可以通过给标签添加class属性来实现；所有伪元素选择器实现的效果要用过新增标签来实现。

<div>
    <p>a</p>
</div>
// 伪类选择器
p:first-child {
    color:red;
}
//等效于
<div>
    <p class="first-child">a</p>
</div>
p:first-child {
    color: red;
}

// -----------------------------------
<div>
    <p>a</p>
</div>
// 伪元素选择器
P::first-letter {
    color: red;
}
// 等效于
<div>
    <p><span>a</span></p>
</div>
p span {
    color: red;
}

其中伪元素的" : "、" :: "在效果是相同的，但是兼容性上CSS2的" : "反而比CSS3的" :: "更好一些，不过在 H5 的开发中还是更建议用" :: "。

其次就是伪元素必须设置content属性，否则一切都是无用功。

编辑于 2021-04-18 17:03:57 回复(0)