详解CSS（三）

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、的博客

🛺系列专栏：CSS专栏

🚲给大家推荐一个网站😉很实用😚我一直在上面刷题：点击跳转进入网站注册登录即可刷题

文章目录

继承性

外层元素身上的样式会被内层元素所继承。

<!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>Document</title>
    <style>
        body{
            color: #f00;
        }
    </style>
</head>
<body>
    <div>
        我是div
    </div>
</body>
</html>

如果内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素所覆盖。

<!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>Document</title>
    <style>
        body{
            color: #f00; 
            font-size: 12px; /* 样式没有与div样式相同，div会继承body样式 */
        }
        div{
            color: #ff0; /* 样式与body元素样式一致，会把body元素上的样式覆盖掉 */
        }
    </style>
</head>
<body>
    <div>
        我是div
    </div>
</body>
</html>

注意：

并不是所有的样式都能被继承，只有文本与字体样式才能继承，其他的样式属性不能被继承。在实际工作中，我们往往会给 body 标签设置字体大小与字体颜色。因为 body 标签是最外层的元素，内层的元素会继承外层的元素的样式。

优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器

一般而言，选择器指定的越准确，优先级就越高。

<!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>Document</title>
    <style>
        *{ /* 通配符选择器 */
            color: red;
        }
        div{ /* 标签选择器 */
            color: green;
        }
        .div{ /* 类选择器 */
            color: blue;
        }
        #div{ /* ID选择器 */
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="div" id="div" style="color: black;">
        我是div
    </div>
</body>
</html>

!important 属性

!important在CSS中的作用：

important在英文中是 “重要的” 意思，!important 主要是用来提升属性的权重，其属性值的权重无穷大。其语法格式为：属性:值 !important

<!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>Document</title>
    <style>
        div{
            color: green !important;
        }
        .div{
            color: blue;
        }

    </style>
</head>
<body>
    <div class="div">
        我是div
    </div>
</body>
</html>

正常通过优先级，div 应该继承类选择器的属性，当我们给标签选择器属性后面加入!important时，将强制应用该样式。

注意：!important它只提升了属性的权重并没有提升选择器的优先级。

多类名书写

类名：指的是class属性值，一个标签可以携带多个类名，指的是class的属性值可以有多个，每一个属性值之间使用空格分隔。例如：<标签名 class=“值1 值2 值3”></标签名>

多个类名的优点：1、减少CSS代码量 2、多个类名的样式会叠加到当前元素上面

<!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>Document</title>
    <style>
        .div1{
            font-weight: bold;
        }
        .div2{
            color: red;
        }
        .div3{
            font-weight: bold;
            color: red;
        }

    </style>
</head>
<body>
    <div class="div1">我是div1</div>
    <div class="div2">我是div2</div>
    <div class="div3">我是div3</div>
    <div class="div1 div2">我是div3二号</div>
</body>
</html>

注意：当我们设置多个类名时出现样式冲突，以CSS代码下面的为准，下面将覆盖上面样式。

<!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>Document</title>
    <style>
        .div1{
            color: black;
        }
        .div{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div div1">我是div</div>
</body>
</html>