层叠性

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

覆盖性原则：

  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. pip3 install beautifulsoup4 出现错误 There was a problem confirming the ssl certificate

    chenhuimingdeMacBook-Pro:groceryList Mch$ sudo pip3 install beautifulsoup4 The directory '/Users/Mch ...

  2. c++ 的学习笔记 第一集cim cout

    1. 你要用这个东西,所以得有包含它得头文件,就像java 你要用某个模块,你得包含这个模块 模块化??单片机里面学的模块化(可以在vs里面实现) 2. 当我把注册表regedit 程序删除之后成功了 ...

  3. 浅聊Linux的五种IO模型

    在日常 Coding 中,多多少少都会接触到网络 IO,就会想要深入了解一下.看了很多文章,总是云里雾里的感觉,直到读了<UNIX网络编程 卷1:套接字联网API>中的介绍后,才豁然开朗. ...

  4. requests + 正则表达式 获取 ‘猫眼电影top100’。

    使用 进程池Pool 提高爬取数据的速度. 1 # !/usr/bin/python 2 # -*- coding:utf-8 -*- 3 import requests 4 from request ...

  5. P5110-块速递推【特征方程,分块】

    正题 题目链接:https://www.luogu.com.cn/problem/P5110 题目大意 数列\(a\)满足 \[a_n=233a_{n-1}+666a_{n-2},a_0=0,a_1= ...

  6. Redis之品鉴之旅（一）

    Redis之品鉴之旅(一) 好知识就如好酒,需要我们坐下来,静静的慢慢的去品鉴.Redis作为主流nosql数据库,在提升性能的方面是不可或缺的.下面就拿好小板凳,我们慢慢的来一一品鉴. 1)redi ...

  7. Python日常Bug集

    1.TypeError: 'int' object is not iterable: 场景示例: data = 7 for i in data: print(i) # 原因:直接对int数据进行迭代造 ...

  8. Matrix Analysis and Application

    Chap 1: Linear Equations and Matrix Linear equations Gaussian elimination Pivot; Triangularize; Back ...

  9. v-for为什么最好(一定)要加key

    v-for 指令基于一个数组来渲染一个列表,如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> ...

  10. Pandas高级教程之:时间处理

    目录 简介 时间分类 Timestamp DatetimeIndex date_range 和 bdate_range origin 格式化 Period DateOffset 作为index 切片和 ...