非零基础自学前端最后一遍一 HTML+CSS 9 CSS继承-层叠-元素类型 9.2 CSS属性的特性-层叠性

今天药忘吃喽~ 2024-03-25 19:16 52阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  9 CSS继承-层叠-元素类型
         *   *  9.2 CSS属性的特性-层叠性
             *   *  9.2.1 CSS属性的层叠
                 *  9.2.2 选择器的权重

![在这里插入图片描述][3fb92eb0256a434bb19208b2f8336a31.png_pic_center]

#### 一 HTML+CSS ####

#### 9 CSS继承-层叠-元素类型 ####

##### 9.2 CSS属性的特性-层叠性 #####

###### 9.2.1 CSS属性的层叠 ######

*  CSS的翻译是层叠样式表, 什么是层叠呢?
    
     *  对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
     *  那么属性会被一层层覆盖上去;
     *  但是最终只有一个会生效;
    
    ![在这里插入图片描述][b4de284fe10745adbc5a80d80baad17c.png_pic_center]
 *  那么多个样式属性覆盖上去, 哪一个会生效呢?
    
     *  判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
     *  判断二: 先后顺序, 权重相同时, 后面设置的生效;
 *  那么如何知道元素的权重呢?

###### 9.2.2 选择器的权重 ######

按照【经验】(老师的经验，并不是真的有这样的值)，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）

*  !important：10000
 *  内联样式：1000
 *  id选择器：100
 *  类选择器、属性选择器、伪类：10
 *  元素选择器、伪元素：1
 *  通配符：0

![在这里插入图片描述][6b302260a60e4da2bd7f818a5f2c392d.png_pic_center]

![在这里插入图片描述][410d16eacf624be3a7f039c4808ea203.png_pic_center]

[3fb92eb0256a434bb19208b2f8336a31.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/08f921e3fcbd45a4ad1b95b480f9e55c.png
[b4de284fe10745adbc5a80d80baad17c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/31b6037a87b3458a8a382041dd8c5fe6.png
[6b302260a60e4da2bd7f818a5f2c392d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8adee74258f84aae984f7273380f29af.png
[410d16eacf624be3a7f039c4808ea203.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/10b7094a5598427ba38a0f754ffb99c5.png