知优码

您现在的位置是:首页 > WEB相关 > Css样式

Css样式

搞定css样式选择器的优先级顺序

2020-04-13Css样式
css选择器的作用是将定义的样式用在哪个元素上。大家熟悉的是内联样式,即元素上添加style属性里面定义样式,将直接显示效果。当通过选择器进行应用样式时将会出现优先级的问题。
css选择器
css选择器的作用是将定义的样式用在哪个元素上。大家熟悉的是内联样式,即元素上添加style属性里面定义样式,将直接显示效果。当通过选择器进行应用样式时将会出现优先级的问题。
下面逐步介绍CSS选择器的优先级。
如将段落内的字体设为红色,使用内联样式则为:
<p style="color:red">你好</p>

一、css选择器的分类

CSS 7 种基础的选择器:

ID 选择器, 如 #id{}

类选择器, 如 .class{}

属性选择器, 如 a[href="segmentfault.com"]{}

伪类选择器, 如 :hover{}

伪元素选择器, 如 ::before{}

标签选择器, 如 span{}

通配选择器, 如 *{}

二、单个选择器的优先级

 

  1. 优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器
  2. 就近原则:相同优先级的选择器应用在同一个元素时,哪个层次的样式离元素近使用哪个。

三、CSS选择器的组合

所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成,组合的方式有5 种:

并列选择符:element1,element2  将样式应用于element1,element2元素。逗号分隔。

后代选择符: .element .subelement{} 将样式应用于element内所有的subelement元素。空格分隔。

儿子选择符: .father > .child{} 将样式应用于father的子元素child,即father的第一级child。大于号分隔。

兄弟选择符: .bro1 + .bro2{} 将样式应用于含有相同父元素的bro1,bro2。加号分隔。

搭档选择符:element1~element2 将样式应用于出现在同一个父元素并紧随其后的element1,element2。加号分隔。

四、组合选择器优先级计算规则

  1. 计算选择符中 ID 选择器的个数(a)
  2. 计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b)
  3. 计算选择符中标签选择器和伪元素选择器的个数之和(c)
  4. 按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。

按上述步骤进行理解。先走第一步,如果成立则直接应用样式,否则进入第二步同上。
即如果有两个组合样式,如果第一个的id选择器多余另一个,则直接使用第一个的样式,再不进行后续判断。如果id选择器一样多,则进入第二步的比较。明白了吗。

五、最高优先级

CSS样式后插有 !important 标识,则拥有最高优先级。若同时插有 !important,则再利用二、四中的优先级进行判断。

参考整理自
1.www.runoob.com/w3cnote/css-style-priority.html 优先级
2.www.w3school.com.cn/cssref/css_selectors.asp css选择器手册