前端跟随黑马学前端前端连载黑马 CSS

跟随黑马学前端-8，CSS的元素显示模式

Joker2Yue2022-12-082022-12-08

第八天：CSS的元素显示模式

在没有错误日志的情况下诊断任何问题无异于闭眼开车。——Apache官方文档

学习目标

CSS的三大特性
CSS的注释

CSS的三大特性

层叠性、继承性、优先级

层叠性

相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题

层叠性原则：

样式冲突：遵循的原则是就近原则，那个样式离结构近，就执行哪个样式
样式不冲突：不会重叠

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

其中只会覆盖color，并将color赋值为pink，font-size不会被覆盖，依然生效

继承性

会继承父标签的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS层叠</title>
    <style>
        div{
            color: pink;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        <p>龙生龙，凤生凤，老鼠的儿子会打洞</p>
    </div>
</body>
</html>

恰当的使用继承效果，可以减少代码量
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

行高的继承

body{
	font:12px/1.5 'Microsoft YaHei';
}
div{
	//子元素继承了父元素body的行高1.5
    //这个1.5是当前文字大小的1.5倍
	font-size: 14px;
}

行高可以跟单位也可以不跟，没写单位的时候是当前字体大小的倍数

优先级

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

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

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

选择器	选择器权重
继承或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important 重要的	无穷大

注意：
1. 权重是由4组数字组成，但是永远不会有进位
2. 可以理解成类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
3. 等级判断从左到右，如果某一位数值相同，则判断下一位数值
4. 继承的权重是0，如果该元素没有直接选中，不管父类权重有多高，子元素得到的权重都是0

优先级的叠加

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

权重虽然会叠加，但是不会进位，也就是(0,0,1,0)>(0,0,0,10)

指定的越明确（选择器选择的范围越小）权重越高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重的叠加</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* li 的权重为：0，0，0，1 */
        li{
            color:red;
        }
        /* ul li 的权重为0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
        ul li{
            color:green
        }
    </style>
</head>
<body>
    <ul>
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>
</html>