css三大特性

最新推荐文章于 2024-09-30 08:51:48 发布

拜拜雪公主zz

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量90

点赞数

分类专栏：前端css笔记文章标签： css

本文链接：https://blog.csdn.net/qq_46152483/article/details/119235145

版权

前端css笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

css三大特性

css有三个非常重要的特性：层叠性、继承性、优先级

1. 层叠性

相同选择器给设置相同的样式，后面的样式会覆盖掉前面的样式。层叠性主要解决样式冲突的问题。
层叠性原则

样式冲突：遵循的原则就是就近原则，哪个离结果近，就执行哪个样式
样式不冲突，不会重叠。

在这里插入图片描述

2. 继承性

子标签会继承父标签中的某些样式，如文本颜色和字号。简单的理解就是：子承父业

恰当的使用继承可以简化代码，降低css样式的复杂性
子元素可以继承父元素的样式（text-，font，line-这些元素开头的可以继承，以及color属性）
行高的继承
font：12px/24px斜杠后面的是行高的大小
font：12px/1.5行高可以跟单位，也可以不跟单位。这个表示的是行高是字体大小的1.5倍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承权重</title>
    <style>
        /*最终颜色是粉色，因为 虽然ID选择器的权重大于元素选择器，但是需要设置属性的是li标签，ID是div标签里面的
        继承的权重是0；*/
        #nav{
            color: red;
        }
        li{
            color:pink;
        }
    </style>
</head>
<body>
<div id="nav">
    <li>12344</li>
    <li>12344</li>
    <li>12344</li>
</div>
</body>
</html>

3. 优先级

当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性
选择器不同，则根据选择器权重 执行

选择器	选择器权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=“”	1,0,0,0
!import	无穷大

权重计算：将图上看的权重分别看做 0， 1 ，10， 100 ，1000，
则继承或者通配符的权重就是0，如果是元素选择器则有几个元素就是几，
比如 div,ul ,li{} 这个选择器的权重就是1+1+1=3；
比如类选择器权重就是10 ：.nav , ul ,li {},这个选择器的权重就是 10+1+1=12；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重叠加</title>
  <style>
    .nav li{
      color: red;
    }
    .pink{
      color: pink;
    }                        /*.nav li 权重是11， 这是一个后代选择器，类权重10，标签权重1*/
                             /* .pink是 类选择器 权重是10，所以颜色是红色
                             但是如果改成 两个类选择器  权重就会是20   .nav  .pink*/
    .nav .pink{
      color: greenyellow;
    }

  </style>

</head>
<body>
<div class="nav">
  <li class="pink">我肯定在几百年前就说过爱你</li>
  <li>我肯定在几百年前就说过爱你</li>
  <li>我肯定在几百年前就说过爱你</li>
  <li>我肯定在几百年前就说过爱你</li>
</div>
</body>
</html>