一、层叠性

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. 2018-9-30-win10-UWP-剪贴板-Clipboard

    原文:2018-9-30-win10-UWP-剪贴板-Clipboard title author date CreateTime categories win10 UWP 剪贴板 Clipboard ...

  2. 2019-6-15-WPF-触摸到事件

    原文:2019-6-15-WPF-触摸到事件 title author date CreateTime categories WPF 触摸到事件 lindexi 2019-06-15 08:58:54 ...

  3. 对try catch finally的理解

    对try catch finally的理解1.finally  总是会运行的,即使在catch中thorw抛出异常了. 2.finally 在 return后没有结束,而是继续运行finally 2. ...

  4. Log4基本配置

    前言:作为一个程序员你要学会调试,对于一种调试都无法找到问题所在的情况,你要学会看日志,要学会看日志你的学会怎么样去写入日志,接下来教你配置C#Log4 第一步,你的在配置文件中配置好对应的参数 &l ...

  5. 微信小程序使用函数防抖解决重复点击消耗性能问题

    wxml: <view bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend=&quo ...

  6. Nexus6P 设置Debug模式

    一劳永逸,设置手机进入Debug模式实现完美Root 使用mkbootimg进行boot.ing编辑 将修改的系统官方Rom包中的boot.ing和mkbooting工具中的mkboot.mkboot ...

  7. [b0012] Hadoop 版hello word mapreduce wordcount 运行(二)

    目的: 学习Hadoop mapreduce 开发环境eclipse windows下的搭建 环境: Winows 7 64 eclipse 直接连接hadoop运行的环境已经搭建好,结果输出到ecl ...

  8. 【分布式搜索引擎】Elasticsearch之如何安装Elasticsearch

    在Macos上安装 一.下载安装过程 最新版本下载地址: https://www.elastic.co/cn/downloads/elasticsearch 历史版本下载地址: https://www ...

  9. my.cnf配置文件实用优化

    [client] 1.登陆过程自动化(这样做可以让你在命令行登陆的时候免去输入用户名和密码) host="mysql服务器地址" user="用户名" pass ...

  10. 5.3 RDD编程---数据读写

    一.文件数据读写 1.本地文件系统的数据读写 可以采用多种方式创建Pair RDD,其中一种主要方式是使用map()函数来实现 惰性机制,即使输入了错误的语句spark-shell也不会马上报错. ( ...