> 文档中心 > [C1进阶之路-Web基础] CSS优先级

[C1进阶之路-Web基础] CSS优先级

往期回顾,专栏一览

🍉 JavaSE 🍋 AWT 🍑 数据结构
🍅 C1进阶之路 🍒 每日一练 🌽 代码报错
🍈 活动

🍹欢迎各路大佬来到 Nick 主页指点

☀️本期文章将学习 [C1进阶之路-Web基础] CSS优先级,我是博主Nick。✨

✨我的博客主页:Nick_Bears 🌹꧔ꦿ

🌹꧔ꦿ博文内容如对您有所帮助,还请给个点赞 + 关注 + 收藏

    

🍋 注:资料来源于C1进阶考试资料  

     

🍉 当创建的CSS样式表越来越多、越来越复杂的时候,一个元素的样式可能受到多个CSS样式表的影响,到底这个元素显示的是哪个样式表的样式呢?通过CSS优先级可以帮助我们得出结论。

  

1、CSS优先级

🍋 浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下

  • 【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器】

🍋 通配符选择器【*】和关系选择符【+(相邻选择符)、>(子代选择符)、~(兄弟选择符)、" "(后代选择符)等】对优先级没有影响

🍋 在选择器使用较多的情况下,使用CSS优先级判断元素的属性值显示很容易出错且不利于排错,可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级

选择器 权重
内联样式 1000
ID选择器 100
类选择器、属性选择器、伪类选择器 10
标签选择器、伪元素选择器 1
相邻选择符、子代选择符、兄弟选择符、后代选择符 0

  

2、选择器权重计算

🍅 选择器的权重可以相加

#header .nav li { list-style: none; }

🍅 该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111

🍅 对于同一个元素的两种选择器均声明了同一个属性情况

  • 权重相同时,根据HTML代码从上往下执行的特点,后面选择器会覆盖前面选择器中相同的属性

  • 权重不同时,权重大的选择器生效

  

3、!important规则

当你在一个样式声明中使用!important规则时,这个样式将覆盖其他的任何声明
!important规则与优先级无关,但是会直接影响样式的最终显示结果

  

💬题目01

📝 现有如下代码片段,hello world的最终显示颜色为color: ________

#son.bt p {color: #111999;}#father>div p {color: #333444;}

hello world

  

key:#111999

    

💬题目02

📝 现有如下代码片段,hello world的最终显示颜色为color: ________

.text1 {color: #999998 !important;}#son {color: #00ff00;}

hello world

  

key:#999998

      

 💬题目03

📝 现有如下代码片段,hello world的最终显示颜色为color: ________

.text1:nth-of-type(1) {color: #999998}#son {color: #00ff00;}

hello world

  

key:#00ff00

     

 💬题目04

📝 现有如下代码片段,文本「C1见习能力认证」的最终显示颜色为color: ________

    .title ~ p { color: #ff0000;    }    div > p { color: #00ff00;    }

CSDN能力认证中心

C1见习能力认证

C4专项能力认证

C5全栈能力认证

  

key:#ff0000

      

 💬题目05

📝 现有以下代码,文本「C1见习能力认证」的字体颜色最终显示为_____?

    .title ~ p { color: #ff0000;    }    div.box > p { color: #00ff00;    }

CSDN能力认证中心

C1见习能力认证

       

key:#00ff00

NICE