CSS选择器优先级的学习与应用

简介: 选择器优先级是CSS初学者必须掌握的要点,掌握了优先级就能轻松得掌控全局的样式变化,下面我将从概念,基础优先级,优先级计算三个方面来带读者轻松掌握CSS选择器优先级

选择器优先级

选择器优先级是CSS初学者必须掌握的要点,掌握了优先级就能轻松得掌控全局的样式变化,下面我将从概念基础优先级优先级计算三个方面来带读者轻松掌握CSS选择器优先级

概念

在使用不同选择器对元素添加样式的时候会造成样式冲突现象,即使用不同类型的选择器对某个标签赋予相同的样式属性但不同的属性值,而冲突的原因常常就是选择器优先级造成的,除了选择器优先级会造成样式冲突之外,我们还可以使用其特性来处理我们的样式

* {
    margin:0px;
    padding:0px;
}
.box {
    margin:10px
}
复制代码

上面的例子就比较常见,我们一般先使用通配符选择器对外边距和内边距进行初始化,再进行个别元素附加边距,下面我带读者一一列举各个选择器的优先级

基础优先级

优先级划分为六个,分别为:通配符选择器标签选择器类选择器ID选择器内联样式!import,下面来分别介绍一下六种等级的特性。

通配符选择器

通配符选择器一般用于全局元素的属性初始化,比如进行一个内边距和外边距的初始化,设置为0,优先级记为0级

* {
    margin:0;
    padding:0;
}
复制代码

标签选择器

标签选择器一般常用于各个固有元素的样式预设,比如说盒子,链接等等,优先级记为1级。

a {
    color:pink;
}
复制代码

类选择器

类选择器是非常常用的,经常和标签选择器搭配使用,优先级记为2级。

. a-red {
    color:red
}
复制代码

ID选择器

ID选择器,不常用,在选择器的设计中要正确使用ID选择器,不是很推荐去使用ID选择器去赋予样式,因为其主要的是为了方便获取DOM元素,且其优先级过高,频繁使用会导致样式优先级混乱,优先级记为3级。

#main {
}
复制代码

内联样式

内联样式,内联样式也不是很常用,尽管优先级很高也不会接触到选择器的范畴,优先级记为4级。

<div style="width: 100px;"></div>
复制代码

! important

切勿滥用 ! important,我们仅仅可以在重置样式中去使用他,其优先级为5级

6种样式的优先级了解到这里,但是掌握到这里还不行,还需要学会优先级计算才能灵活控制样式不会紊乱。

优先级计算

了解单个优先级,但是开发中选择器是经常进行组合使用的,所以必须使用优先级计算来判断优先级大小

数值计算方法

我们通过数值计算来计算每个样式的优先级大小,就是根据上面的各个基础选择器的优先级得到各个选择器的权重值,再将其相加,得到最后的权重值,依靠该权重值来对元素赋予样式。

各个选择器的优先级对应的权重值以指数形式递增,通配符的权重值为0,标签选择器的权重值为1,类选择器的权重值为10,以此类推。

比如下面的样式,我们来计算一下

.box div {
}
复制代码

计算一下其权重值,类选择器的权重值为10,标签选择器的权重值为1,所以最后得到的权重值为11,权重值高的样式会覆盖掉权重值低的相同样式属性

我用码上掘金来展示一下优先级的效果

image.png

上面我分别用使用标签选择器,标签和类选择器组合,由于标签和类选择器组合的权重值高于只使用标签选择器,所以最后的文字颜色是蓝色。

后来居上原则

那么如果权重值相同的情况会怎么样,那么就会采取后来居上的原则,即后面的样式会覆盖掉前面相同的样式属性

image.png

这里是验证后来居上原则,分别使用相同的选择器组合,使其权重值相同都为11,所以最后的文字样式遵循最后赋予的样式,为红色。


相关文章
|
15天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
13 1
|
23小时前
|
前端开发 JavaScript
什么是CSS的:target选择器
什么是CSS的:target选择器
|
3天前
|
前端开发 开发者 容器
CSS进阶-Grid布局高级应用
【6月更文挑战第16天】**CSS Grid布局是CSS3的强大力量,用于复杂二维布局。然而,隐式网格、未命名Grid线和缺少响应式设计是常见问题。解决方法包括显式定义网格结构、命名Grid线和结合媒体查询实现响应式。高级技巧涉及自适应列宽、复杂区域布局和元素层叠对齐。代码示例展示了响应式Grid的用法。掌握这些能提升布局效率和设计灵活性。**
|
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