层叠性

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

覆盖性原则：

  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. python并发与futures模块

    非并发程序(用于对比) 从网上下载20个国家的国旗图像: import os import time import sys import requests # 导入requests库 POP20_CC ...

  2. 软件开发的V模型

    原文来自:http://www.51testing.com/html/67/n-3723567.html 软件开发的V模型大家都不陌生,其中测试阶段分为单元测试->功能测试->系统测试-& ...

  3. P7046-「MCOI-03」诗韵【SAM,倍增,树状数组】

    正题 题目链接:https://www.luogu.com.cn/problem/P7046 题目大意 给出一个长度为 \(n\) 的字符串,然后 \(m\) 次把它的一个子串加入集合.如果一个字符串 ...

  4. Spring，IOC源码分析

    有错勿喷 1.首先是Spring,IOC的基本概念 IOC是一个容器 容器启动的时候创建所有单实例对象 我们可以直接从容器中获取到这个对象 2.调试流程 ioc容器的启动过程?启动期间都做了什么(什么 ...

  5. kubelet源码分析——启动Pod

    前文说到Kubelet启动时,调用到kubelet.Run方法,里面最核心的就是调用到kubelet.syncLoop.它是一个循环,这个循环里面有若干个检查和同步操作,其中一个是地在监听Pod的增删 ...

  6. 你需要知道的MySQL&InnoDB锁都在这里

    目录 一.前言 二.锁的类型 2.1 全局锁 2.2 表级锁 2.2.1 表锁 2.2.2 元数据锁(Meta Data Locks) 2.2.3 自增列锁(AUTO-INC Locks) 2.2.4 ...

  7. [RabbitMQ]Java客户端：源码概览

    本文简要介绍RabbitMQ提供的Java客户端中最基本的功能性接口/类及相关源码. Mavan依赖: <dependency> <groupId>com.rabbitmq&l ...

  8. 常见的==和equals比较

    在笔试上碰到很多这样类似的题,全部整理到这里 String a = "Hello"; String b = "Hello"; String c = new St ...

  9. NLP与深度学习（六）BERT模型的使用

    1. 预训练的BERT模型 从头开始训练一个BERT模型是一个成本非常高的工作,所以现在一般是直接去下载已经预训练好的BERT模型.结合迁移学习,实现所要完成的NLP任务.谷歌在github上已经开放 ...

  10. 活动回顾｜ShardingSphere X openGauss，将会产生怎样的化学反应？

    "ShardingSphere 作为 openGauss 生态的开源分布式数据库解决方案,将持续助力于 openGauss,满足千行百业广大客户分布式场景需求." 5月29日,由  ...