CSS三大特性

最新推荐文章于 2023-01-20 10:00:00 发布

丨小小风离丨

最新推荐文章于 2023-01-20 10:00:00 发布

阅读量195

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_27185691/article/details/106492779

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先性

层叠性

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

样式冲突：就近原则，那个样式离结构烬，就执行哪个样式。（后者优先）
样式不冲突：不会发生层叠。

继承性

子标签会继承父标签的某些样式，例如文本颜色和字号等。可以理解为：子承父业。

恰当使用继承可以简化代码，降低CSS样式复杂性。
子元素可继承：父元素的样式（text-、font-、line-这样元素开头的，以及color属性）

继承性之行高的继承

行高可以跟单位也可以不跟单位。
子元素没有设置行高，会继承父元素的行高。
子元素没有设置文字大小，会继承父元素文字大小，行高也会相应变化
父元素行高没有设置单位,子元素行高 = 当前子元素的文字大小 * 父元素行高

<html>
<head>
<style>
        body {
            color: #ccc;
            /* font: 12px/20px 'Microsoft YaHei'; */
            font: 12px/2.0 'Microsoft YaHei';/* 不带单位 */
        }

        div {
            /* 子元素继承父元素body行高,父元素不带单位 子元素行高等于 = 文字大小 * 2.0 */
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>233</div>
    <p>233</p>
</body>
</html>

优先级

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

选择器相同，则执行层叠性。
选择器不同，根据选择器权重执行。

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

font-size:60px !important; //优先级最高

使用注意点

权重是有4组数字组成但是不会有进位
可以理解为类选择器永远大于元素选择器id选择器永远大于类选择器以此类推.
等级判断从左向右,如果某位数值相同,则判断下一位数值。
可以简单记忆法:通配符和继承权重为0标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式表为1000, important无穷大
继承的权重是0，没有直接选中，不管父元素权重多高，子元素的权重都是0.

<!DOCTYPE html>
<html>
<head>
    <style>
    	/* 父元素权重 0100 */
        #father {
            color: pink;
        }
        /* p继承的权重 0 */
        p {
            color: green;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>233</p>
    </div>
</body>
</html>

权重叠加

在复合选择器中，需要计算权重。权重叠加

权重会有叠加，但永远不会有进位

<!DOCTYPE html>
<html>
<head>
    <style>
    	/* 权重会有叠加，但 永远不会有进位 */
        /* ul li的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
            color: green;
        }

        /* li的权重是 0,0,0,1 */
        li {
            color: red;
        }
        /* .nav li的权重是 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .nav li {
            color: blue;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>233</li>
    </ul>
</body>
</html>