Css - 三大特性

css - 三大特性

1.继承性

祖先元素的关于文本的样式会遗传给后代元素，其它则不会。后代元素会继承祖先元素的关于文本的css样式（水平对齐、字号、字色、行高等）。但a元素不会应用继承来的color，这是因为父元素设置{ color:xx }虽然可以 遗传给子a元素，但子a元素的color有默认的定义（a:link:{ color:blue }）。

2.层叠性

如果通过两个相同选择器设置了同一个元素的某个相同的css属性，按照css相同属性的出现顺序，后面的样式会覆盖前面的样式

div {
    width: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-weight: 900;
    margin: 10px auto;
}

#box {
    background: red;
}

#box {
    background: black; //覆盖了红色
}

<div id="box">H</div>

3.优先性（权重）

如果通过不同的选择器设置了同一个元素的同一个css属性，则浏览器在应用css样式时会判定选择器的权重，权重最大的会被首先考虑。

单个权重的计算

1.!important=∞（无穷大）
2.行内样式=1000，直接在html标签里通过style设置的样式
3.id选择器=0100 
4.类选择器=0010 
5.标签选择器=0001
6.*=0000

id=0100>html tag=0001，所以会应用id所设置的css样式，html标签选择器的样式被忽略

权重值0100

#box {
    background: red;
}
权重0001
div {
    background: black; //被忽略
}

<div id="box">H</div>

多个权重的计算

div {
    width: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-weight: 900;
    margin: 10px auto;
    background: red;
}

0100 id权重值
+ 0001 标签权重值
= 0101
#box span {
    background: #4800ff;
}

0001 标签权重值
span {
    background: black;
}

0101>0001，选择了#box span选择器的设置，span选择器被忽略
style>
ad>
y>
<div id="box">
    <span>H</span>
</div>

权重叠加没有进制，不是满十进一,而是满十向后补0

    0001
    0001
    0001
    0001
    0001
    0001
    0001
    0001
    0001
 + 0001
 = 00010
div div div div div div div div div a {
　color: red;
}

0100
#link {
　color: black;
}

*号选择器的权重是0000，但important的权重是无穷大
* {
　color: green !important;
}

最终选择了*号选择器的设置

父子权重计算

无论父的优先级的值有多高，子继承后就是0或none。

div{
      color:black !important;
}

a{
      color: red;
}

<div><a href="#" id="link">首页</a></div> //取red

通配符选择的是元素自身，此时通配符要大于从父元素继承的权重

body div{ color:red; }
*{ color:#000; }
<div><p>fuck gov</p></div> //p标签的color取值#000

　　

Css - 学习总目录