CSS第四章 CSS样式继承/优先级

最新推荐文章于 2024-06-27 23:54:25 发布

guanerkoushi

最新推荐文章于 2024-06-27 23:54:25 发布

阅读量238

点赞数

分类专栏： Web开发文章标签： css

原文链接：https://www.bilibili.com/video/BV1R4411J7tQ?p=56

版权

Web开发专栏收录该内容

74 篇文章 4 订阅

订阅专栏

CSS

四、CSS样式继承
五、CSS优先级

四、CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承 ( 默认是不能继承的，但是可以设置继承属性 inherit 值 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 300px;height: 300px;border:1px red solid;color: red;font-size: 30px;}
        p{border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

未设置inherit属性,仅文字相关样式继承：
在这里插入图片描述
设置inherit属性,布局相关样式继承：

注：文本相关属性：font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height，text-align,text-indent,text-transform,word-spacing列表相关属性：list-style-image,list-style-position,list-style-type,list-style还有一个属性比较重要，color属性。都可被继承。

五、CSS优先级

我们可以通过不同选择器对同一个元素进样式设置，当产生相同样式时，谁的优先级更高？

1. 相同样式优先级
    当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
    
2. 内部样式与外部样式
    内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
    
3. 单一样式优先级
    style行间 > id > class > tag > * > 继承
	<div id= class= style=>
	
	等级关系(对后期更复杂的优先级判断有帮助)
    注：style行间 权重 1000
              id 权重 100
           class 权重 10
             tag 权重 1
             
 4. !important
    提升样式优先级，非规范方式，不建议使用。( 不能针对继承的属性进行优先级的提升)
  
 5. 标签+类与单类
    标签+类 > 单类 
	
 6. 群组优先级
	群组指div，p{}。
    群组选择器与单一选择器的优先级相同，靠后写的优先级高。
    
 7. 层次优先级
    (1) 权重比较
        ul li .box p input{}   1 + 1 + 10 + 1 + 1
        .hello span #elem{}    10 + 1 + 100

    (2) 约分比较    
        ul li .box p input{}  约分完  li p input{}
        .hello span #elem{}    约分完  #elem{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./base.css">
    <style>
        div{color:red;}
    </style> -->

    <style>
        /* #elem{color: red;} */
        /* .box{color: blue;} */
        /* div{color: green;} */
        /* *{color: red;}
        body{color: blue;} */
        /* #elem{color: red !important;} */

        /* div.box{color: blue;}
        .box{color: red;} */
        
        div{color: blue;}
        div,p{color: red;}
        
    </style>
</head>
<body>
    <!-- <div id="elem" style="color: blue;">这是一个块</div> -->
    <!-- <div id="elem" class="box">这是一个块</div> -->
    <!-- <div id="elem" style="color: blue;">这是一个块</div> -->
    
    <div class="box">这是一个块</div>
    <p>这是一个段落</p>
</body>
</html>