解释CSS三大特性—继承性、层叠性、优先级

时间 2020-01-31

原文原文链接

1、继承性

写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想
要设置一个可继承的属性，只需将它应用于父元素便可。

继承性发生的前提是包含（嵌套关系）
★文字颜色能够继承
★文字大小能够继承
★字体能够继续
★字体粗细能够继承
★文字风格能够继承
★行高能够继承
h系列不能继承文字大小
a标签不能继承文字颜色css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css继承性</title>
    <style>
        div{
            color: #ffffff;
            font-size: 16px;
            text-decoration: underline;
            background: #ffc107;
            border-radius: 10px;
            padding: 5px;
        }
    </style>
</head>

<body>
<div>
    <p>子元素</p>
    <ul>
        <li>
            <p>后代元素</p>
        </li>
    </ul>
    <a href="#">www.vipbic.com</a>
    <h1>我是羊先生</h1>
</div>
</body>
</html>

2、层叠性

一、什么是层叠性？html

CSS处理冲突的一种能力，这个咱们称之为层叠性

二、什么状况出现层叠性？浏览器

只有在多个选择器中“同一个标签”，又设置了“相同的属性”的时候，就会发生层叠性

三、发生层叠性会怎么样？字体

当发生层叠性时，哪一个选择器设置的属性起做用，是由优先级来肯定

3、优先级

权重大的样式修饰，即便在权重小的前面先调用，也是只会显示大的权重
样式

一、什么是优先级？spa

多个选择器可能会选择同一个元素，优先级高的先作，优先级低的后作，这个咱们称之为优先级。

二、优先级判断方式有哪些？firefox

是不是直接选中（间接选中就是指继承，若是是间接选中时，就近原则）
直接选中时是相同选择器（则谁写在后面就听谁的）
直接选中时不是同选择器（则就会按照选择器的优先级来层叠）

三、CSS选择器优先级code

!important > 行内 > id > 类 > 标签 > 通配符 > 继承 > 浏览器默认

权重类型	权重值	解释
继承或者* 的贡献值	0	权重值最低，稍微有点背景的都能干掉他
每一个元素（标签）贡献值	1	权重第二小
每一个类，伪类贡献值为	10	类和伪类是同级别第三小的
每一个ID贡献值为	100	级别正数排行第三
每一个行内样式贡献值	1000	级别虽然高但不推荐使用
每一个!important贡献值	∞ 无穷大	级别最高

!importanthtm

用于提高某个直接选中标签的选择器中的某个属性的优先级的, 能够将被指定的属性的优先级提高为最高
注意点: 
1. !important只能用于直接选中, 不能用于间接选中 
2. 通配符选择器选中的标签也是直接选中的 
3. !important只能提高被指定的属性的优先级, 其它的属性的优先级不会被提高 
4. !important必须写在属性值得分号前面 
5. !important前面的感叹号不能省略
6. IE6及更早浏览器下，!important在同一条规则集内不生效

科普知识: 不一样浏览器采用不一样大小的空间来存储每一位上的权重值：如firefox和ie都是用的8位来存储class位的权重值，也就是2^8=256。当叠加26层class时权重为10*26=260，就会发生溢出，向id位进一，权重为大于一个单一的id选择器.此时26层class的样式会在forefox上发挥做用，覆盖住id选择器的样式效果blog

解释CSS三大特性—继承性、层叠性、优先级

1、继承性

2、层叠性

3、优先级

关于我