CSS_07_Css的三大特性

最新推荐文章于 2024-07-22 20:28:40 发布

M r.J

最新推荐文章于 2024-07-22 20:28:40 发布

阅读量133

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43196061/article/details/87522568

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS的三大特性

层叠性
继承性
特殊性(权重)

层叠性

样式冲突，遵循就近原则；
样式不冲突，不会重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠性</title>
    <style>
        <!--颜色样式冲突，就近原则，黄色
            字体大小样式不冲突，字号为20px -->
        div {
            color: pink;
            font-size: 20px;
        }
        div {
            color: yellow;
        }
    </style>
</head>
<body>
    <div>王可可是一条DOG</div>

</body>
</html>

继承性

css书写样式时，子标签会继承父标签的某些样式，如字体、样色等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性</title>
    <style>
        .jianlin {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="jianlin">
        <p>王思聪</p>
    </div>
</body>
</html>

注意：

不是所有的样式都能继承，子元素可以继承父类元素的样式有text-、font-、line-、color都能继承。

特殊性

在书写css样式时，经常出现两个或者更多规则的应用在同一元素上，这是就会出现权重问题。css定义了一套公式来计算，称为CSS Specificity。采用四位数字串表示，值从左到右，左边最大，逐级递减。

选择器	权重
标签选择器	0,0,0,1
类选择器	0,0,1,0
伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>
    <style>
        /* 标签选择器  0，0，0，1 */
        div {
            color: pink;
        }
        /* 类选择器 0，0，1，0*/
        .jianlin {
            color: red;
        }
        /* 伪类选择器 0，0，1，0*/
        :first-child {
            color: black;
        }
        /* 类选择器 0，1，0，0*/
        #rich {
            color: #ffd62f;
        }
        div {
            /*无穷大*/
            color: green!important;
        }

    </style>
</head>
<body>
<!--行内样式 1，0，0，0-->
    <div class="jianlin" id="rich" style="color: skyblue;">王思聪</div>
</body>
</html>

实际使用中选择器是叠加使用的，权重值也能叠加。

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
#nav p       ---->   0,1,0,1

权重计算是没有进制的说法，0,0,0,5+0,0,0,5=0,0,0,10。

继承的权重为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承</title>
    <style>
        div {
            color: red;
        }
        span {
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <span>继承的权重为0</span>
    </div>
</body>
</html>

练习题

练习1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <style>
        /* 0,2,0,0*/
        #father #son {
            color: blue;
        }
        /* 0,1,1,1*/
        #father p.c2 {
            color: black;
        }
        /* 0,0,2,2*/
        div.c1 p.c2 {
            color: red;
        }
        /* 继承权为0*/
        #father {
            color: green !important;
        }
    </style>
</head>
<body>
    <div id="father" class="c1">
        <p id="son" class="c2">
            试问这行字体什么颜色
        </p>
    </div>
</body>
</html>

练习2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03</title>
    <style>
        /* 0,0,0,2*/
        div p {
            color: red;
        }
        /*继承权重为0*/
        #father {
            color: red;
        }
        /* 0,0,1,1*/
        p.c2 {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="father" class="c1">
        <p class="c2">
            试问这行字体什么颜色
        </p>
    </div>
</body>
</html>

练习3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03</title>
    <style>
        div div {
            color: blue;
        }
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>试问这行字体什么颜色</div>
        </div>
    </div>
</body>
</html>

练习4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06</title>
    <style>
        /* 0,0,2,1*/
        .c1 .c2 div {
            color: blue;
        }
        /* 0,1,0,1*/
        div #box3 {
            color: green;
        }
        /* 0,1,0,1*/
        #box1 div {
            color: yellow;
        }
    </style>
</head>
<body>
<div id="box1" class="c1">
    <div id="box2" class="c2">
        <div id="box3" class="c3">文字</div>
    </div>
</div>
</body>
</html>