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只会提升你指定的那个属性优先级

web前端入门到实战：HTML层叠性优先级！important用法相关推荐

html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
web前端入门到实战：五个最新的CSS特性以及如何使用它们
虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CSS的新特性.虽然这些新特性无法立刻得到众多浏览器的支持,但总是随着时间的发展,这些特性 ...
web前端入门到实战：实现图形验证码
什么是图形验证码图形验证码是验证码的一种.验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers a ...
web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
web前端入门到实战：以轮播效果为案例谈如何写优质代码
作为程序员大家在写代码时谈的最多的就是代码的拓展性.复用性.本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践. 文章分三个步骤.第一步,实现基本功能:第二步,考虑到代码的封装性和复用性: ...
web前端入门到实战：HTML属性选择器（下）
一.格式标签[属性=值]:{属性:值:} 1.属性的取值是以什么开头的 attribute |= value(CSS2)attribute^=value(CSS3)两者之间的区别:CSS2中只能找到 ...
web前端入门到实战：CSS新属性实现特殊的图片显示效果
1 概述 1.1 前言使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果,共列举了2 ...
html弧形列表效果,web前端入门到实战：html5网页特效-弧形菜单
效果: 弧形菜单,文字按规则变形以及变换透明度简单的javascript,上手难度:简单学习笔记: text-decoration: 最主要的功能就是给文字加上附着在文字底部,上方,或者中间的线( ...

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

web前端入门到实战：HTML层叠性优先级！important用法相关推荐

最新文章

热门文章