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>
目录
相关文章
|
6天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
9天前
|
前端开发 开发者
CSS基础-层叠与优先级
【6月更文挑战第10天】本文探讨了CSS中的层叠和优先级概念,解释了层叠上下文和特异性如何决定样式生效。常见问题包括误解后来居上的规则、特异性计算错误及过度使用`!important`。建议开发者理解特异性计算,合理使用层叠上下文,避免不必要的`!important`。通过示例展示了特异性与`!important`对样式的影响,强调实践和理解是提升CSS技能的核心。
|
12天前
|
前端开发
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
|
12天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
20 1
|
12天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
26 1
|
19天前
|
前端开发
要使用CSS选择器选中特定类别的元素
【5月更文挑战第31天】要使用CSS选择器选中特定类别的元素
20 2
|
19天前
|
前端开发
CSS选择器
【5月更文挑战第31天】CSS选择器
20 1
|
22天前
|
前端开发
[CSS] 级联与特异性
这篇内容介绍了CSS样式表的优先级规则。优先级由`!important`、选择器特异性(Specificity)和声明来源决定。特异性计算涉及ID、类和标签的数量,形成三元组进行比较。当特异性相同时,按代码顺序后规则覆盖前规则。建议避免过度使用`!important`以保持代码可维护性,并利用特异性解决优先级问题,作者样式表通常放在最后。
|
29天前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
22 1
|
1月前
|
前端开发
前端 css 经典:选择器速记
前端 css 经典:选择器速记
25 0