CSS学习笔记 | CSS三大特性

最新推荐文章于 2021-12-02 17:38:30 发布

吃面必吃蒜

最新推荐文章于 2021-12-02 17:38:30 发布

阅读量523

点赞数 1

分类专栏：前端文章标签： CSS三大特性层叠性继承性优先级优先级权重

本文链接：https://blog.csdn.net/Curry_On/article/details/102832877

版权

前端专栏收录该内容

24 篇文章 4 订阅

订阅专栏

CSS三大特性

本文内容：
CSS三大特性：
	1. 层叠性
	2. 继承性
		2.1 CSS中的继承
		2.2 一种特殊的继承：行高的继承
	3. 优先级
	4. 优先级权重小练习

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

1、层叠性

相同的选择器如果对相同的样式进行了设置，那么就会产生冲突，层叠性主要就是解决冲突的问题。

遵循的原则：

就近原则：哪个样式离结构近，就执行哪个样式。
样式如果不冲突，就不会重叠

例如：

<style>
	div {
          color: red;
          font-size: 16px;   /*由于字体样式没有冲突，所以会正常显示*/
        }
     div {
   	      color: blue;    /*根据就近原则，颜色会是蓝色*/
       }
   </style>
<body>
    <div>
        我到底是红色还是蓝色呢？
        没错，我会是蓝色的！
    </div>
</body>

2、继承性

2.1 CSS中的继承

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

例如：

<style>
    div {
        color: red;
        font-size: 16px;
    }
</style>

<body>
    <div>
        <p>
            我会继承div爸爸的属性，所以我是红色的。
        </p>
    </div>
</body>

注意：

恰当地使用继承可以简短代码量
子元素可以继承父元素的某些样式（ text- font- line-这些元素开头的可以继承，一级 color 属性）

2.2 一种特殊的继承：行高的继承

如下代码：

<style>
    body {
        color: blue;
        font: 16px/1.5 'Mircosoft YaHei';  
        /*这里的1.5含义是 子元素的行高是当前文字大小的1.5倍 */
    }
    div {
        font-size: 14px;
    }
</style>
<body>
    <div>
        我的颜色是蓝色，因为我继承了body爸爸属性
        那我的行高是多少呢？
        答案是： 14 * 1.5 = 21 px
    </div>
</body>

再看一种情况：

<style>
    body {
        color: blue;
        font: 16px/1.5 'Mircosoft YaHei';  
        /*这里的1.5含义是 子元素的行高是当前文字大小的1.5倍 */
    }

</style>
<body>
    <div>
        <ul>
            <li>
                我没有指定文字大小欸，但是我会继承body的文字大小16px，所以行高就是16*1.5=24px
            </li>
        </ul>
    </div>
</body>

如此设置 1.5 的好处是：里面的子元素可以根据自己的文字大小自动地调整行高。

3、优先级

当一个元素指定了多个选择器，那么就会存在优先级的问题

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

如表：

选择器	选择器权重
继承或`*`	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style = “”	1,0,0,0
`!important`	无穷大

权重从上至下依次变大

例如：

<style>
    .test {
        color: red;
    }
    div {
        color: blue;
    }
</style>
<body>
    <div class="test">
        我是蓝色还是红色呢？
        由于类选择器的权重更大，所以我是红色的。
    </div>
</body>

<style>
    .test {
        color: red;
    }
    div {
        color: blue!important;
    }
</style>
<body>
    <div>
        我是蓝色还是红色呢？
        由于存在!important，所以我是蓝色的。
    </div>
</body>

优先级注意点：

权重有四组数字组成，但不会有进位，可以理解为：类选择器永远大于元素选择器，以此类推
等级判断从左至右，如果某一位数值相同，则判断下一位

继承的权重是0，举个例子：

<style>
    #father {
        color: blue;
    }
    p {
        color: red;
    }
</style>
<body>
    <div id="father">
        <p>
            我其实是红色，因为继承的权重为零，我不会继承div爸爸的蓝色
        </p>
    </div>
</body>

注意链接标签<a>的特殊情况

<style>
    body {
        color: red;
    }
</style>
<body>
    <a href="#">
    	你以为我继承了body的红色？你错了！
        我由浏览器默认指定成了 蓝色、有下划线。
        如果要修改我，要单独对我进行修改
    </a>
</body>

权重的叠加

<style>
    /* ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
    ul li {
        color: blue;
    }
    /* li 的权重是 0,0,0,1 */
    li {    
        color: red;
    }
</style>
<body>
    <ul class = "nav">
        <li>
            我是li， 由于 ul li 的权重大于 li，所以我是蓝色
        </li>
    </ul>
</body>

<style>
    /* ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
    ul li {
        color: blue;
    }
    /* .nav li 的权重是 0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
   .nav li {    
        color: red;
    }
</style>
<body>
    <ul class = "nav">
        <li>
            我是li， 由于 .nav li 的权重大于 ul li，所以我是红色
        </li>
    </ul>
</body>

注意，权重的叠加不会有进位问题！

4、优先级权重小练习：

如何把第一个 li 中的文字改成蓝色？

<style>
    .nav li {
        color: red;
    }
</style>
<body>
    <ul class="nav">
        <li>把我改成蓝色</li>
        <li>我是li</li>
    </ul>
</body>

你是不是这么想的？直接把第一个 li 中添加一个类选择器然后：

<style>
    .nav li {
        color: red;
    }
    .blue {
        color: blue;
    }
</style>
<body>
    <ul class="nav">
        <li class="blue">把我改成蓝色</li>
        <li>我是li</li>
    </ul>
</body>

这么做你就错了，因为 .nav li 的权重大于 .blue，所以颜色并不会改变，正确的操作是：

<style>
    .nav li {
        color: red;
    }
    .nav .blue {   			 /*这么做就可以了*/
        color: blue;
    }
</style>
<body>
    <ul class="nav">
        <li class="blue">把我改成蓝色</li>
        <li>我是li</li>
    </ul>
</body>