css三大特性：层叠性、继承性、优先级

Matcha_ice_cream

已于 2022-03-19 22:21:43 修改

阅读量542

点赞数 1

分类专栏： # css 文章标签： css css3 前端

于 2022-01-11 13:12:08 首次发布

本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/122428497

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS三大特性：层叠性、继承性、优先级

1. 层叠性
2. 继承性
3. 优先级

1. 层叠性

当元素样式发生冲突时，遵循就近原则
就近原则：那个样式离结构近，就使用哪个样式

（1）代码编写：

<style>
  div {
    background-color: red;
  }
  div {
    background-color: greenyellow;
  }
</style>
<body>
  <div>hello, JavaScript!</div>
</body>

（2）结果展示：
在这里插入图片描述

2. 继承性

元素可以继承父元素的样式：
以text-，font-，line-开头的，以及color属性都可以继承

（1）代码编写：

<style>
  div {
    font-family: 'Courier New', Courier, monospace;
    color: grey;
    text-align: center;
    line-height: 30px;
  }
</style>
<body>
  <div>
    <p>hello!</p>
  </div>
</body>

（2）显示效果：
在这里插入图片描述

3. 优先级

1.优先级产生的原因：同一个元素指定了多个不同的选择器

2.使用情形：

元素的选择器相同，使用层叠性
元素的选择器不同，比较选择器的权值，使用权值大的选择器样式

3.选择器的权重顺序：

选择器	权重
!important	∞（无穷大）
style=""行内样式	1, 0, 0, 0
id选择器	0, 1, 0, 0
类选择器( . )、伪类选择器( : )、属性选择器([ ])	0, 0, 1, 0
元素选择器、伪元素选择器	0, 0, 0, 1
继承 / 通配符选择器( * )	0, 0, 0, 0

4.代码演示效果：

4.1、代码演示：

<style>
  ul li {
    color: red;
  }
  .nav li {
    color: skyblue;
  }
</style>
<body>
  <ul class="nav">
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</body>

4.1、显示效果：类选择器权重 > 元素选择器权重
在这里插入图片描述
4.2、代码演示：

<style>
  #nav {
    color: red;
  }
  .one {
    color: green;
  }
  
</style>
<body>
  <ul id="nav">
    <li class="one">one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</body>

4.2、显示效果：类选择器权重 > 继承权重
在这里插入图片描述
4.3、代码演示：

<style>
  #nav .one{
    color: red;
  }
  .one {
    color: blue !important;
  }
  
</style>
<body>
  <ul id="nav">
    <li class="one">one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</body>

4.3、显示效果：!important的权重最高
在这里插入图片描述
4.4、代码演示：

<style>
  #nav .one{
    color: red;
  }
</style>
<body>
  <ul id="nav">
    <li class="one" style="color:purple;">one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</body>

4.4、显示效果：行内样式权重 > id选择器权重
在这里插入图片描述

Matcha_ice_cream

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css三大特性：层叠性、继承性、优先级

CSS三大特性：层叠性、继承性、优先级1. 层叠性2. 继承性3. 优先级1. 层叠性当元素样式发生冲突时，遵循就近原则就近原则：那个样式离结构近，就使用哪个样式（1）代码编写：<style> div { background-color: red; } div { background-color: greenyellow; }</style><body> <div>hello, JavaScript!&lt
复制链接

扫一扫

专栏目录