一、层叠性

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. SQLMap常用教程

    先安装 python环境(2.6.x或2.7版本) ,再将SQLMap 放在安装目录下 注意:sqlmap只是用来检测和利用sql注入点的,并不能扫描出网站有哪些漏洞,使用前请先使用扫描工具扫出sql ...

  2. js实现复制功能兼容ios

    html: <div id="copyBT">这是要复制的1内容</div> <a id="contentas">这是复制按 ...

  3. tushare库:免费的python财经数据接口

    tushare官网以及在线文档http://tushare.org/ 安装    pip install -i https://pypi.tuna.tsinghua.edu.cn/simple tus ...

  4. Linux 初识Libevent网络库

    初识Libevent libevent是用c写的高并发网络io库,只要有文件描述符,就都可使用libevent. libevent使用回调函数(callback) . 有了libevent,网络编程我 ...

  5. vsftpd服务

    vsftpd服务 文件传输协议(file transfer protocol,FTP),基于该协议FTP客户端与服务端可以实现共享文件,上传文件,下载文件.ftp基于TCP协议生成一个虚拟的连接,主要 ...

  6. 3.3 Spark的部署和应用方式

    一.Spark的部署 1.单机Local 2.集群 (1)Standalonc Spark自带的资源管理器,效率不高 (2)YARN 如果部署的是Hadoop集群,可以用YARN资源调度 (3)Mes ...

  7. day4_常用的内置函数

    # dict() 工厂函数, 生成字典 a = dict(u=2, i="hello", **{"kk":"cc"}) a = dict(y ...

  8. Mysql基础知识--触发器

    触发器的操作 在数据库系统中,当执行表事件时,则会激活触发器,从而执行其包含的操作 在具体的应用中,之所以会经常使用出发器数据对象,是由于该对象能够加强数据库表中数据的完整性约束和业务规则等. 一.创 ...

  9. LG2272/BZOJ1093 「ZJOI2007」最大半连通子图 Tarjan缩点+DAG求最长链

    问题描述 LG2272 BZOJ1093 题解 观察半联通的定义,发现图中的一些结点,构成的链一定是一个半联通子图. 此时存在的环可能会干扰求解,于是\(\mathrm{Tarjan}\)缩点. 于是 ...

  10. Jmeter压力并发测试

    一.http://jmeter.apache.org/ 二.点击Download Releases选择版本下载 三.下载解压: 将解压后的文档存盘-下载logkit-2.0.jar(汉化包)放到jme ...