直奔主题,CSS的三大特性:继承性,层叠性,优先级

一、继承性

作用: 给父元素设置的一些属性,子元素和后代元素也有权使用

注意:并不是所有的属性都能够继承,只有color / font- / text- / line 开头的属性才可以继承

例:

   <style>            div{                color: blueviolet;                font-size: 20px;                text-align: center;                line-height: 20px;                background-color: burlywood;            }        </style>    </head>    <body>        <div>            <span>我是span</span>        </div>    </body>

我为span的父元素div添加了color/font-size/line-height/text-align/background-color等样式属性,我们打开F12浏览器开发者模式


我们可以看到Inherited from div 这句话 , 它的意思是 从div继承 ,并且除了background-color其它样式属性都是以高亮状态显示,证明了CSS的继承只有部分样式可继承

这里给读者们再提醒一句:a标签的文字颜色与下划线无法被继承改变,h标签的的文字大小也不能被继承正确的改变。

二、层叠性

作用:处理样式属性冲突的一种解决方式,层叠性只有在多个 选择器选中“同一个标签”然后又设置了“相同的属性”才会出现咱们的层叠性

例:

<style>            span{                color: cadetblue;            }            span{                color: chartreuse;            }        </style>    </head>    <body>        <div>            <span>我是span</span>        </div>    </body>

这里我们选中到了span,并且设置了同一样式属性和两种不同颜色


第一次设置的颜色被划了一条横线 , 意味着第一次设置的颜色被第二次颜色给覆盖了

那么问题来了?浏览器是根据什么规则来选择谁来覆盖谁的样式呢?

这就涉及到我们的下一个话题 ---->

三、优先级

优先级的作用显而易见:用来判断如何层叠

个人总结了优先级的三种判断方式

1.间接选中(间接选中就是继承)

如果都是间接选中,谁离目标标签近,样式就听谁的

 <style>        div ul{            color: blue;        }        div {            color: red;        }    </style>    </head>    <body>        <div>            <ul>                <li>CSS的优先级判断</li>            </ul>        </div>    </body>

通过继承,间接选中li标签,分别设置不同的字体颜色


浏览器选择从ul里面继承 , 这是因为我们的 ul标签 比 div标签 更加靠近我们的li标签

2.直接选中,但是是相同类型的选中器

这个结论很简单,谁写在后面样式就听谁的,直接看例子:

<style>        .li{            color: blue;        }        .li{            color: yellow;        }        </style>    </head>    <body>        <div>            <ul>                <li class="li">CSS的优先级判断</li>            </ul>        </div>    </body>

可以看到blue被yellow给层叠了,这是因为yellow写在后面


3.直接选中,但是是不同类型的选择器

直接说结论: id > 类 > 标签 > 通配符 >浏览器默认

 <style>        #li{            color: red;        }        .li{            color: blue;        }        li{            color: yellow;        }        </style>    </head>    <body>        <div>            <ul>                <li class="li" id="li">CSS的优先级判断</li>            </ul>        </div>    </body>


看结果可知,只有id选择器活下来了 =.=

其它的读者们可以下来再试一试..


其实,优先级问题还没说完,接下来补充两点:!important 和 权重

一、!important

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

注意!!! !important 只能用在直接选中身上!!!而且只能提升某个属性!!并非整个选择器!!

<style>        #li{            color: red;        }        .li{            color: blue !important;        }        </style>    </head>    <body>        <div>            <ul>                <li class="li" id="li">CSS的优先级判断</li>            </ul>        </div>    </body>

根据刚刚所讲 id >类 ,本来应该是id选中器中的属性优先级高,一旦加了!important,结果就是...


二、权重

当多个选择器混合在一起使用时,需要通过计算权重来判断优先级

那么全重怎么判断呢!?

计算规则:看数量

id选择器多的优先级 > 类名选择器多的 > 标签名数量多的

<style>        #div #ul .li{            color: red;        }        #div .ul .li{            color: yellow;        }        .div .ul .li{            color: blue;        }    </style>    </head>    <body>        <div class="div" id="div">            <ul class="ul" id="ul">                <li class="li" id="li">CSS的优先级判断</li>            </ul>        </div>    </body>

由于第一个id选择器的数量多,所以表示为red


如果出现了 id选择器数量 = 类名选择器数量 = 标签名数量 ,就不会继续计算权重了

而是谁写在后面样式就听谁的

【免责声明:本文图片及文字信息均由千锋重庆Java培训小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

©著作权归作者所有:来自51CTO博客作者qq6048445b266f9的原创作品,如需转载,请注明出处,否则将追究法律责任

每一份赞赏源于懂得

赞赏

0人进行了赞赏支持

更多相关文章

  1. 选择器优先级、模块化样式组件、伪类选择器
  2. 第三课 选择器、模块化组件、伪类选择器
  3. CSS样式表优先级及模块化原理及实现
  4. CSS:选择器优先级、前端组件样式模块化原理实现、常用伪类选择器
  5. css选择器优先级、伪类选择器的使用和模块化样式
  6. 代码中的Thread.sleep(0) 有什么意义?是写错了吗?
  7. css元素选择器
  8. CSS学习(一)
  9. CSS选择器讲解

随机推荐

  1. cocos2d-x & Android 环境配置笔记
  2. android aidl 进程通信 调用错误
  3. android:screenOrientation 90,270设置
  4. Android(安卓)OpenGL ES 分析与实践
  5. Android-0.Android Studio布局中Relative
  6. Android的横竖屏切换
  7. Android Studio控件属性大全
  8. Android横竖屏总结
  9. Android编译过程详解(三)
  10. Android 单元测试之JUnit和Mockito