700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > web前端入门到实战:HTML层叠性优先级!important用法

web前端入门到实战:HTML层叠性优先级!important用法

时间:2018-11-02 21:24:56

相关推荐

web前端入门到实战:HTML层叠性优先级!important用法

一、层叠性

1.定义:CSS处理冲突的一种能力

2.注意点:层叠性只有在多个选择器中“同一标签”,然后又设置了“相同的属性”,才会发生层叠性

3.CSS缩写:Cascading StyleSheet

#odd{color: red;}p{color:blue;}..........省略代码......... <body><p id="odd">我被多处设置属性</p>web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

解释:如上代码我们对p标签以及odd类进行了属性的设置,但只遵循了一种属性设置,因此可以看出CSS具有解决这种层叠性冲突的功能。开发者工具中也指出了p标签的属性设置不生效。

二、优先级

1.作用:当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定

2.优先级的判断的三种方式

(1)是否被直接选中(间接地选中就是“继承”),如果是间接选中那么遵循就近原则。

例子一:遵循直接被选中的情形

li{color: red;}p{color:blue;}..........省略代码......... <ul><li><p id="odd">我被多处设置属性</p></li></ul>web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

例子二:间接选中遵循就近原则

ul{color:blue;}li{color: red;}..........省略代码......... <ul><li><p id="odd">我被多处设置属性</p></li></ul>

(2)是否是相同的选择器,遵循后设置原则,谁在后面设置的就遵循谁的

例子:红的在后面就是红的

p{color:blue;}p{color:red;}..........省略代码......... <ul><li><p id="odd">我被多处设置属性</p></li></ul>

(3)不同选择器

如果都是直接被选中,并且不是相同的选择器,那么就会按照选择器的优先级来层叠

按优先级为:id>类>标签>通配符>继承>浏览器默认

例子:我们按照上面逆序分别验证了,结果在意料之中正确

ul{color:blue;}li{color: red;}*{color: purple;}p{color:yellow;}.jjj{color:navajowhite;}#odd{color: green;}..........省略代码......... <ul><li><p id="odd" class="jjj">我被多处设置属性</p></li></ul>web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

三、什么是important?

(1)作用:用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高

(2)格式​:

选择器{属性:值 !iimportant;}

(3)注意点​:

i.important只能用于直接选中,不支持间接选中

#odd{color: red;}.jjj color:blue !important;}..........省略代码......... <p id="odd" class="jjj"> 我是用来让id选择器失效的,让class选择器优先级更高 </p>web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

ii.通配符选择器中标签也属于直接选中

#odd{color: red;}*{color: yellow !important;}..........省略代码......... <p id="odd" class="jjj"> 我是用来让id选择器失效的,让class选择器优先级更高 </p>

iii.​!important只会提升你指定的那个属性优先级

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。