一、层叠性

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

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

3.CSS缩写：Cascading StyleSheet

       #odd{color: red;}

       p{color:blue;}

..........省略代码.........

<body>

<p id="odd">我被多处设置属性</p>

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

二、优先级

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

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

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

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

        li{color: red;}

        p{color:blue;}

..........省略代码.........       

<ul>

    <li>

        <p id="odd">我被多处设置属性</p>

    </li>

</ul>

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

        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>

三、什么是important?

（1）作用：用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高

（2）格式​：

选择器｛属性：值 ！iimportant;}

（3）注意点​：

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

        #odd{color: red;}

        .jjj color:blue !important;}

..........省略代码.........

 <p id="odd" class="jjj">

    我是用来让id选择器失效的，让class选择器优先级更高

</p>

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

        #odd{color: red;}

        *{color: yellow !important;}

..........省略代码.........

<p id="odd" class="jjj">

    我是用来让id选择器失效的，让class选择器优先级更高

</p>

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

四、源码：

d87_usage_of_!important.htm

ld87_usage_of_!important.html

地址:

https://github.com/ruigege66/HTML_learning/tree/master

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载27-层叠性&优先级&！important用法的更多相关文章

  1. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

  2. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  3. 认识CSS中css的三大特性：层叠性、继承性以及优先级

    前端之HTML.CSS(四) CSS CSS三大特性 层叠性:多种样式的叠加,一个属性通过两个选择器设置在同一个元素上,后一个样式会把前一个样式层叠(覆盖).层叠性的两种情况:第一种样式冲突时,后样式 ...

  4. CSS(4)---三大特性(继承性，层叠性，优先级)

    CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...

  5. css的层叠性+继承性+优先级+权重

    一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...

  6. 0017 CSS 三大特性：层叠性、继承性、优先级

    目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...

  7. css样式的继承性、层叠性 、优先级

    一.css样式的继承性: 作用:给父元素设置一些属性,子元素也可以使用 应用场景: 一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容.优化代码,降低工作量 注意点: 1.并不 ...

  8. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  9. 前端 CSS层叠性 CSS选择器优先级

    层叠性 层叠性:权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了 权重:谁的权重大,浏览器就会显示谁的属性 我们现在已经学过了很多的选择器,也就是说在一个HTML页面中有很多种方式找到一个元素并 ...

随机推荐

  1. Java中级知识归纳（三）

    十一.Java垃圾回收机制 Java的垃圾回收机制是Java虚拟机提供的能力,用于在空闲时间以不定时的方式动态回收无任何引用的对象占据的内存空间.可以使用显式调用,System.gc();Runtim ...

  2. 深入浅出JVM的锁优化案例

    锁优化 适应性自旋(Adaptive Spinning) 线程阻塞的时候,让等待的线程不放弃cpu执行时间,而是执行一个自旋(一般是空循环),这叫做自旋锁. 自旋等待本身虽然避免了线程切换的开销,但它 ...

  3. 为什么重复的GET请求变慢了？

    最近在研究慢请求监控的问题,写了一个简单的测试代码:在网页端(index.html)通过fetch函数向服务端获取数据,然后打印请求耗时. function requestData() { let s ...

  4. 还学不会webpack？看这篇！

    摘要: webpack入门教程. 原文:还学不会webpack?看这篇! 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. Webpack已经流行好久了,但很多同学使用webp ...

  5. Spring Cloud Bus介绍--Spring Cloud学习第七天(非原创）

    一.什么是Spring Cloud Bus二.Spring Cloud Bus之RabbitMQ介绍三.Spring Cloud Bus整合RabbitMQ四.Spring Cloud Bus整合Ka ...

  6. Linux磁盘分区/格式化/挂载目录

    分区及挂载目录 以CentOS7.2为例,一般我们服务端应用部署前需要确认部署机的磁盘空间及挂载目录.操作如下: 如上图,如果操作系统是新装的,未挂盘的话需要先挂载盘.操作如下: fdisk -l # ...

  7. seafile部署安装

    安装epel源 yum install epel-release -y 安装docker yum install -y docker service docker start systemctl en ...

  8. Java数据库连接组件C3P0和DBCP

    C3P0连接池组件 开源数据库连接池组件 jar包:c3p0-0.9.2.jar和mchange-commons-java-0.2.2.3.jar 支持JDBC3规范和JDBC2的标准扩展 使用项目H ...

  9. android内存管理-ION/PMEM【转】

    转自:https://www.jianshu.com/p/0eac3d3ff6bb ION debug ION 在/sys/kernel/debug/ion/ 提供一个debugfs 接口. 每个he ...

  10. 如何解决问题：程序无法正常启动(0xc0000022)

    如何解决问题:程序无法正常启动(0xc0000022) 下文是由NeoSmart技术,通过全球网络上的工程师开发者和技术人员一起收集起来的信息,进行汇总并编辑而成的. 错误现象 该错误一般会通过警告, ...