CSS 特性

作者: roy_pub | 来源:发表于2018-12-02 23:46 被阅读8次

CSS的三大特性总结(深入理解css权重)
CSS 特性
CSS特性
CSS 特性
CSS特性
CSS特性
CSS特性
CSS相关文章
CSS 常见知识点记录-flex布局、css特性、positio
css基础04- css三大特性

层叠性

样式冲突，遵循就近原则
样式不冲突，不会层叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inherit</title>
    <style>

        p {
            color: green;
            font-size: 25px;
        }

        p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>Hello World</p>
    </div>
</body>
</html>

结果为红色25px的：Hello World

继承性

子标签会继承父标签的某些样式，一般和文本相关的会继承，比如文字颜色，大小，样式等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inherit</title>
    <style>
        .inherit {
            color: cyan;
        }
    </style>
</head>
<body>
    <div class="inherit">
        <p>Hello world</p>
    </div>
</body>
</html>

优先级

优先级	权重
* / 继承	0，0，0，0
标签	0，0，0，1
类，伪类	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>inherit</title>
    <style>
        div {
            color: cyan;
        }

        .green {
            color: green;
        }

        #red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="red" class="green">
        Hello World
    </div>
</body>
</html>

结果为红色的：Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inherit</title>
    <style>
        div {
            color: cyan;
        }

        .green {
            color: green!important;
        }

        #red {
            color: red;
        }
    </style>
</head>
<body>
    <div style="color: orange;" id="red" class="green">
        Hello World
    </div>
</body>
</html>

结果为绿色的：Hello World

权重相同，就近原则

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>inherit</title>
   <style>

       p {
           color: green;
       }

       p {
           color: red;
       }
   </style>
</head>
<body>
   <div>
       <p>Hello World</p>
   </div>
</body>
</html>

结果为红色的：Hello World

权重会叠加

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inherit</title>
    <style>

        div p {
            color: green;

        }

        p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>Hello World</p>
    </div>
</body>
</html>

结果为绿色的：Hello World