层叠性

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

覆盖性原则：

  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的权重无限大，例border: 1px solid #333 !impportant

权重的叠加

如果是复合选择器，则会有权重叠加，需要计算权重

  • div ul li ------> 0,0,0,3

  • .nav ul li ------> 0,0,1,2

  • a:hover -------> 0,0,1,1

  • .nav a ---------> 0,0,1,1

权重只会叠加，不会进位

示例

例1



<style>

    .nav li {

        color: red;

    }

    li {

        color: pink;

    }

</style>

<body>

    <ul class="nav">

        <li>选择器的权重</li>

    </ul>

</body>

文字最后展示为红色，.nav li权重为（0，0，1，1），而li标签选择器的权重最低为（0，0，0，1）

如果给标签增加类选择器呢

 <style>

        .nav li {

            color: red;

        }

        li {

            color: pink;

        }

        .pink {

            color: pink;

        }

    </style>

    <ul class="nav">

        <li class="pink">选择器的权重</li>

    </ul>

结果还是红色，因为类选择器权重为（0，0，1，0），如果要使文字变成粉色，则

.nav .pink {

    color: pink;

}

css三大特性 & 选择器的权重的更多相关文章

  1. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  2. Css - 三大特性

    css - 三大特性 1.层叠性 如果通过两个相同选择器设置了同一个元素的某个相同的css属性,按照css相同属性的出现顺序,后面的样式会覆盖前面的样式 2.继承性 祖先元素的关于文本的样式会遗传给后 ...

  3. CSS三大特性（继承、优先级、层叠）之个人见解

    首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...

  4. CSS 三大特性 层叠 继承 优先级

    css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...

  5. python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  6. css三大特性及权重说明

    一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...

  7. 前端面试 CSS三大特性

    CSS的三大特性 1.层叠性 代码由上向下执行,相同选择器设置到同一元素上,样式冲突的,会执行比较靠近html的样式,样式不冲突的情况下不影响 代码如下 <!DOCTYPE html> & ...

  8. css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

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

    目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...

随机推荐

  1. Jmeter集合点技术

    集合点简介 好比小学时候做广播体操,先让大家集合,等到时间统一开始做体操. 创建集合点 同步定时器 同时签到 注意:作用域 参数设置 用户数 为0 具体数值,不能大于 超时时间 为0,没有超时时间 具 ...

  2. Mybatis-Plus 全局Update更新策略，和insert插入查询策略

    前言 最近在使用mybatis-plus做项目的时候,发现使用updatById方法的时候,更新某个字段时候出现了问题,一般业务操作都是更新不为空的字段,结果发现更新了所有字段,这是由于mybatis ...

  3. 启用 Spring-Cloud-OpenFeign 配置可刷新，项目无法启动，我 TM 人傻了（上）

    本篇文章涉及底层设计以及原理,以及问题定位,比较深入,篇幅较长,所以拆分成上下两篇: 上:问题简单描述以及 Spring Cloud RefreshScope 的原理 下:当前 spring-clou ...

  4. try catch中的return与finally

    try catch中的return与finally 代码为 public class Test{ public int add(int a,int b){ try { return a+b; } ca ...

  5. JS返回一个字符串中长度最小的单词的长度

    题目:编写一个方法,返回字符串中最小长度的单词的长度. var str = 'What a good day today!'; 1 //方法一 2 function returnString1(str ...

  6. 牛逼的磁盘检查工具duf

    1.部署 wget https://github.com/muesli/duf/releases/download/v0.5.0/checksums.txt wget https://github.c ...

  7. 在IDEA中创建SpringBoot项目01

    1.选择创建项目 2.填写项目信息 3. 4. 5.Finish后会下载,之后生成目录结构: 6.在自己的包目录结构下添加了Controllr和Entiy测试项目: Controller: 1 pac ...

  8. appium启动ios系统上面的app需求的参数

    Appium启动APP至少需要7个参数  'platformVersion','deviceName'.'udid'.'bundleId'.'platformName'.'automationName ...

  9. iOS路由最佳选择是什么

    背景 记得四年前iOS路由开始盛行,当时比较有名的是蘑菇街的,后来CTMediator写了几篇文章把蘑菇街批的体无完肤,导致我后来写新项目用了CTMediator,那一堆组件创建的叫一个酸爽啊!再后来 ...

  10. 分布式事物SAGA

    目录 概述SAGA SAGA的执行方式 存在的问题 重试机制 SAGA VS TCC 实现SAGA的框架 概述SAGA SAGA是1987 Hector & Kenneth 发表的论文,主要是 ...