层叠性

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

覆盖性原则：

  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. anchor-animation

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. FastAPI（39）- 使用 CORS 解决跨域问题

    同源策略 https://www.cnblogs.com/poloyy/p/15345184.html CORS https://www.cnblogs.com/poloyy/p/15345871.h ...

  3. 为什么'\x1B'.length===1？\x与\u知识延伸

    背景 先讲一下背景,再说原因 大多数库都会在日志中使用chalk库为console的内容进行上色 被chalk处理后,其原本的内容会被'\x1B...'所包裹 console.log(chalk.bl ...

  4. Visual Studio Docker调试端口设置

    一.前言 在Visual Studio 调试程序时,Docker中的容器端口和主机端口映射随机生成,导致每次调试都需要修改前端API接口的地址 二.解决方案 1.修改Docker调试启动参数,找到启动 ...

  5. Go语言核心36讲（Go语言基础知识五）--学习笔记

    05 | 程序实体的那些事儿(中) 在前文中,我解释过代码块的含义.Go 语言的代码块是一层套一层的,就像大圆套小圆. 一个代码块可以有若干个子代码块:但对于每个代码块,最多只会有一个直接包含它的代码 ...

  6. 网络协议之:加密传输中的NPN和ALPN

    目录 简介 SSL/TLS协议 NPN和ALPN 交互的例子 总结 简介 自从HTTP从1.1升级到了2,一切都变得不同了.虽然HTTP2没有强制说必须使用加密协议进行传输,但是业界的标准包括各大流行 ...

  7. 蝉知CMS 7.X XSS漏洞复现

    个人博客地址:xzajyjs.cn 作为一个开源的企业门户系统(EPS), 企业可以非常方便地搭建一个专业的企业营销网站,进行宣传,开展业务,服务客户.蝉知系统内置了文章.产品.论坛.评论.会员.博客 ...

  8. .NET下使用ufun函数取CAM操作的进给速度

    UF_PARAM_ask_subobj_ptr_value,这个函数在封装的时候,给了很大一个坑啊. NXOpen.UF.UFParam.AskSubobjPtrValue(ByVal param_t ...

  9. 更好的 java 重试框架 sisyphus 的 3 种使用方式

    回顾 我们前面学习了 更好的 java 重试框架 sisyphus 入门简介 更好的 java 重试框架 sisyphus 配置的 2 种方式介绍 更好的 java 重试框架 sisyphus 背后的 ...

  10. 【UE4 C++】简单获取名称、状态、时间、帧数、路径与FPaths

    基于UKismetSystemLibrary 获取各类名称 // Returns the actual object name. UFUNCTION(BlueprintPure, Category = ...