前端第四波

最新推荐文章于 2022-10-09 16:04:05 发布

空巷挽清风

最新推荐文章于 2022-10-09 16:04:05 发布

阅读量166

点赞数

分类专栏： HTML CSS 文章标签： CSS html CSS三大特性

本文链接：https://blog.csdn.net/Kong_xiang/article/details/90109701

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

前端第四波

因为之前五一回家了一周，开学后紧接着就是学校为期一周的C#虚拟仿真设计实训，所以耽搁，之后应该不会了。

CSS三大特性：

1.层叠性

2.继承性

3.优先级

层叠性：

层叠性是指当一个标签被设置多个重复样式的时候，一个属性会覆盖另一个属性。

例如：经一个div设置背景颜色为黄色，然后设置背景颜色为红色，那么最终颜色可能为红色，也可能为黄色，按照先后顺序可能是黄色，但也不绝对，因为还需要考虑优先级的因素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三大特性</title>
    <style>
        div{
            background-color: red;
        }
        div{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>div</div>  <!-- 最终背景颜色是蓝色 -->
    <div style="background-color: green">div</div>  <!-- 最终背景颜色是绿色 -->
</body>
</html>

继承性:

继承性是指当子标签没有设置属性时会继承父标签格式

可继承属性：

字体类属性：字体的颜色，字体的大小等

文本属性：行高等

背景：背景的颜色等

不可继承属性：

标签的宽度，高度，边框等

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS三大属性</title>
    <style>
        div{
            font-size:70px;
            background-color: #000;
            color:skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个div下的文本</p>
    </div>
</body>
</html>

优先级：

!important>>行内样式>>id选择器>>类选择器>>标签选择器>>继承样式

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>CSS三大特性</title>
    <style type="text/css">
        div{
            color: green;
            }
        .a1{
            color: blue;
            }
        .a1 div{
            color: pink;
            }
        .a2{
            color: red;
            }
        #a2{
            color: yellow;
            }
        #a2 div{
            color: purple;
            }
    </style>
</head>
<body>
  <div>我是绿色，内部样式表优先于浏览器缺省</div>
  <div class="a2">我是红色，类选择器优先于内部样式表</div>
  <div class="a2" id="a2">我是黄色，ID选择器优先于类选择器</div>
  <div class="a1">
      <span>我是蓝色，类选择器优先于内部样式表</span>
      <div>我是粉色，类派生选择器优先于类选择器</div>
      <div class="a2">我还是粉色，类派生选择器优先于所有类选择器</div>
      <div id="a2">
          <span>我是黄色，ID选择器优先于类派生选择器</span>
          <div>我是紫色，ID派生选择器优先于类派生选择器</div>
          <div class="a1">我还是紫色，ID派生选择器优先于所有类选择器</div>
          <div class="a1" id="a1">我还是紫色，ID派生选择器优先于所有ID选择器</div>
          <div class="a1" id="a1" style="color:#000000;">我是黑色，内联样式驾到闲杂人等退下</div>
      </div>
  </div>
</body>
</html>

权重计算：

权重使用四个数字来衡量(x,x,x,x)

继承的权重为(0,0,0,0)
标签选择器的权重为(0,0,0,1)
类、伪类选择器的权重为(0,0,1,0)
id选择器选择器的权重为(0,1,0,0)
行内样式的权重为(1,0,0,0)
!important的权重无限大

权重的大小为各位相加，切不进位。当权重相同时考虑就近原则。

空巷挽清风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端第四波

前端第四波因为之前五一回家了一周，开学后紧接着就是学校为期一周的C#虚拟仿真设计实训，所以耽搁，之后应该不会了。CSS三大特性：1.层叠性2.继承性3.优先级层叠性：层叠性是指当一个标签被设置多个重复样式的时候，一个属性会覆盖另一个属性。例如：经一个div设置背景颜色为黄色，然后设置背景颜色为红色，那么最终颜色可能为红色，也可能为黄色，按照先后顺序可能是...
复制链接

扫一扫