首页 > Web开发 > 详细

css三大特性

时间:2021-06-19 23:14:43      阅读:30      评论:0      收藏:0      [点我收藏+]

层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突,一个属性会覆盖另外一个属性。

覆盖性原则

  1. 层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标签最近的样式

  2. 这里要注意只覆盖同样的不可重复的样式属性,不会覆盖允许重复的属性

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            background-color: red;
        }
        div{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>123</div>  <!-- 最终背景颜色是蓝色 -->
    <div style="background-color: green;">123</div>  <!-- 最终背景颜色是绿色 -->
</body>
</html>
技术分享图片

继承性

继承性是指当子标签没有设置样式时,会继承父标签的样式

子元素可以继承父元素的样式包括:text-文本属性、font-字体属性、line-行高以背景类属性,要注意子标签不会继承父标签的宽度、高度、边距属性

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            font-size:70px;
            background-color: #CCC;
            color:skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p>p继承div的样式</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的权重无限大

css三大特性

原文:https://www.cnblogs.com/silloutte/p/14904938.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!