CSS三大特性

最新推荐文章于 2024-09-14 08:09:14 发布

XiaoSaurus77

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量25

点赞数

分类专栏： CSS 文章标签： css 前端 html5

本文链接：https://blog.csdn.net/qq_50149096/article/details/133779931

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

层叠性
- 概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）

什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>层叠性</title>
  <style>
    #container p {
      color: cadetblue;
    }

    div p {
      color: brown;
      font-size: 20px;
    }
  </style>
</head>
<body>

<div id="container">
  <p>
    Lorem ipsum dolor sit amet.
  </p>
</div>

</body>
</html>

继承性
- 概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
- 规则：优先继承离的近的
- 常见的可继承属性：
text-??, font-??, line-??, color …
- 备注：参照MDN网站，可查询属性是否可被继承
  
  示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    
    <div id="container">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. A, voluptate?
        <p>
            Lorem ipsum dolor sit amet.
            <span>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, natus! Officiis non iusto impedit quaerat, voluptatibus totam maxime recusandae ducimus, accusantium possimus quos ab? Qui, cumque placeat? Natus, ut officiis.
            </span>
        </p>
    </div>

</body>
</html>

优先级
简单聊：!mimportant > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式
详细聊：需要计算权重

计算权重时需要注意：并集选择器的每一个部分是分开算的

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        /* ID选择器 */
        #container1 {
            color: slateblue;
        }

        /* 类选择器 */
        .container p {
            color: darkgray;
        }
        /* 元素选择器 */
        span {
            color: green;
        }

        /* 通配选择器 */
        * {
            color: blue;
        }

        /* 继承的样式*/
        body {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    
    <div id="container1" class="container">
        Lorem ipsum dolor sit amet.
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, perspiciatis.
            <span>
                <br>
                <br>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore possimus facilis, voluptates magni repellat unde.
            </span>
        </p>
    </div>

</body>
</html>