CSS三大特性

一、层叠性

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

​ 样式不冲突则不层叠

二、继承性

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

1
2
3
4
5
6
7
div	{
    color: red;
}

<div>
     <p>继承div的样式，变为红色</p>
</div>

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

子元素可以继承父元素的样式 （text-，font-，line-等开头的元素可以继承，以及color属性）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
    font: 12px/24px;	12为字号，24为行高
    font: 12px/1.5;		
    /*不跟单位时候，1.5则表示子元素div的行高*1.5倍，即10*1.5px=15px*/
    行高使用倍数方便子元素根据字体大小自动调整行高
}
div {
    font-size: 10px;
}


<body>
    <div>继承body行高，1.5*10=15px</div>
	<ul>
		</li>li继承父类的大小行高，父类ul未指定则再上一层body，而body的字体大小为12，行高1.5，则行高最后为当前文字大小的1.5倍，则为12px*1.5=18px</li>
	</ul>
</body>

三、优先级

选择器权重

标签选择器 计算权重公式
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style=”” 1,0,0,0
每个!important 最重要的 ∞ 无穷大

值从左到右，左面的最大，一级大于一级，数位之间没有进制（会加到0,0,0,7也不会有进位），级别之间不可超越。

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

div { color: pink !important; }

注意权重对应的对象是谁，有可能对于这个标签来说其实是继承。

不管父元素的权重多高，子元素得到的权重都只是继承而已。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <style>
        .test {
            color: red;
        }
        div {
            color: pink!important;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>

权重叠加：（如果是复合选择器，则会有权重叠加）

1
2
3
4
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

注意：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <style>
        /* .nav li  权重是 11 */
        .nav li {
            color: red;
        }
        /* 需求把第一个小li 颜色改为 粉色加粗 ? */
        /* .pink  权重是 10  */
       .nav {
            color: pink;
            font-weight: 700;
        }
    </style>

<body>  
    <ul class="nav">
        <li class="pink">人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
</body>

这里.nav未产生继承，因为.nav后面加了li，所以直接选择了li元素，所以.nav算为类的权重