CSS选择器优先级(特异性)

简介: CSS选择器优先级(特异性)

权重排行(高到低)

1、行内样式

(!important)

2、ID选择器

#id

2、ID选择器

#id

4、类型和伪元素选择器

div, ::before

权重向量

(0, 0, 0, 0)

(行内样式,ID选择器,class/属性/伪类选择器/,类型/伪元素)
• 1
• 2

权重相同,定义靠后优先

实例



项目1
项目1
项目1



/ (0, 1, 3, 1) /
#container .menu.menu li.item2 {
color: #ff4757;
}

/ (0, 1, 2, 1) /
#container li:nth-child(2).item2 {
color: #7bed9f;
}

/ (0, 1, 1, 1) /
#container li.item2 {
color: #ffa502;
}


/ (0, 0, 1, 1) /
li.item2 {
color: #5352ed;
}

/ (0, 0, 1, 0) /
.item2 {
color: #ff6b81
}

最终效果

11.png

            </div>
目录
相关文章
|
20天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
|
1月前
|
前端开发 算法
CSS语言的层叠和优先级
CSS语言的层叠和优先级
|
1月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
1月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
20 1
|
10天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
N..
|
1月前
|
前端开发 UED
CSS选择器
CSS选择器
N..
9 0
|
1月前
|
前端开发
css选择器
css选择器【2月更文挑战第26天】
25 12
|
1月前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
23 1
|
1月前
|
前端开发 开发者
掌握CSS中的常见选择器
掌握CSS中的常见选择器
34 0