CSS三大特性

三大特性

CSS有三个非常重要的三个特性：

　　▶ 层叠性

　　▶ 继承性

　　▶ 优先级

■ 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式

层叠性主要解决样式冲突的问题

层叠性原则：

　　样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

　　样式不冲突，不会层叠

□ 示例

div {
    color: red;
    font-size: 12px;
}

div {
    color: pink;
}

<div> 字体颜色为粉色，而非红色，但文字大小是12px </div>

■ 继承性

子标签会继承父标签的某些样式，如文本颜色和字号

简单的理解就是：子承父业

恰当地使用继承可以简化代码，降低CSS样式的复杂性

子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，以及color属性)

□ 示例

div {
    color: pink;
    font-size: 12px;
}

<div>
    <p>p标签继承了div的样式</p>
</div>

□ 行高的继承

示例：

body {
    color: red;
    font: 12px/1.5 'Microsoft YaHei';
}

div {
    font-size: 14px;
}

p {
    font-size: 16px;
}

<div>color是red，font-size为14px，line-height是21px</div> 
<p>color是red，font-size为16px，line-height是24px</p>

示例说明：

　　如果子元素没有设置行高，则会继承父元素的行高为1.5

　　此时子元素的行高是：当前子元素的文字大小*1.5

　　body行高1.5的最大优势就是里面子元素可以根据自己文字大小自动调整行高

■ 优先级

当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性

选择器不同，则根据选择器权重执行

□ 优先级列表

继承或者*：0,0,0,0

元素选择器：0,0,0,1

类选择器，伪类选择器：0,0,1,0

ID选择器：0,1,0,0

行内样式 style="" ：1,0,0,0

!important 重要的 ：∞无穷大

□ 注意

权重是有4组数字组成，但是不会有进位

可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推

等级判断从左向右，如果某一位数值相同，则判断下一位数值

继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0，如下示例：

#father {
    color: red;
}

p {
    color: pink;
}

a {
    color: green;
}

 

<div id="father">
    <p>
        父标签div用的是id选择器，权重为0,1,0,0,
        子标签p继承了父标签的样式,其权重总是0,0,0,0(不管父标签的权重多么大，即便是用了!important)
        子标签用的是元素选择器，其权重是0,0,0,1
        因此p标签执行元素选择器的样式，所以p标签的文字颜色是粉色
    </p>
</div>

<a href="#">我是单独样式</a>

注：浏览器默认为超链接制定了一个样式，即 a {color: blue;}，因此超链接的样式需要单独指定

■ 权重叠加

复合选择器使用了多种选择器，因此需要通过权重叠加的方式计算权重

注意：权重可以叠加，但不会进位

□ 示例

ul { /* 权重= 0,0,0,1*/
    color: red;
}

ul li { /* 权重= 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
    color: green;
}

.nav li { /* 权重= 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
    color: blue;
}

<ul>
    <li>项目1，显示绿色</li>
    <li>项目2，显示绿色</li>
    <li>项目3，显示绿色</li>
</ul>

<ul class="nav">
    <li>项目1，显示蓝色</li>
    <li>项目2，显示蓝色</li>
    <li>项目3，显示蓝色</li>
</ul>

一些权重计算的例子：

　　div ul li --> 0,0,0,3

　　.nav ul li --> 0,0,1,2

　　a:hover --> 0,0,1,1 (标签选择器 + 伪类选择器)

　　.nav a --> 0,0,1,1