css三大特性 & 选择器的权重
层叠性
层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突，一个属性会覆盖另外一个属性。
覆盖性原则：
层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式
这里要注意只覆盖同样的不可重复的样式属性，不会覆盖允许重复的属性
示例：
<!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三大特性 & 选择器的权重的更多相关文章
- CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- Css - 三大特性
css - 三大特性 1.层叠性 如果通过两个相同选择器设置了同一个元素的某个相同的css属性,按照css相同属性的出现顺序,后面的样式会覆盖前面的样式 2.继承性 祖先元素的关于文本的样式会遗传给后 ...
- CSS三大特性（继承、优先级、层叠）之个人见解
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
- CSS 三大特性 层叠 继承 优先级
css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...
- python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- css三大特性及权重说明
一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...
- 前端面试 CSS三大特性
CSS的三大特性 1.层叠性 代码由上向下执行,相同选择器设置到同一元素上,样式冲突的,会执行比较靠近html的样式,样式不冲突的情况下不影响 代码如下 <!DOCTYPE html> & ...
- css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器
最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...
- 0017 CSS 三大特性：层叠性、继承性、优先级
目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...
随机推荐
- 在Ubuntu18.04安装docker之后，以登陆用户身份执行docker pull jenkins，报错：connect: permission denied
Using default tag: latest Got permission denied while trying to connect to the Docker daemon socket ...
- 测试验收标准checklist
需求实现功能清单 功能实现目的 需求改造功能清单 关联功能清单 关联系统 端到端全流程场景 业务联系性场景 业务全流程场景 上下需求关联规则 业务角度在流程中关注项 财报.评级 授信方案 反洗钱 面向 ...
- str.strip(chars)
strip会去除给定字符串的指定字符,指定字符可以是一个或多个,去除从左右分别进行,没有则忽略,如果需要去除某个中间的字符,必须先去除外围的字符 看几个例子,以s为例,故意设置为非对称结构, s = ...
- CF1556D-Take a Guess【交互】
正题 题目链接:https://codeforces.com/contest/1556/problem/D 题目大意 现在有\(n\)个你不知道的数字,你有两种询问操作 询问两个下标的数字的\(and ...
- python读Excel方法（xlrd）
在我们做平常工作或自动化测试中都会遇到操作excel,Python处理exc相当顺手,如何通过python操作excel,当然python操作excel的库有很多,比如pandas,xlwt/xlrd ...
- MFC获取文件路径和文件夹路径
MFC的界面中,需要实现这样两个功能: 1.在界面上加一个按钮,单击按钮弹出一个对话框选择文件,在工程中获得文件的路径: 2.在界面上加一个按钮,单击按钮弹出一个对话框选择文件夹,在工程中获取文件夹的 ...
- 全套Java教程_Java基础入门教程，零基础小白自学Java必备教程 #011 # 第十一单元 String&ArrayList #
一.本单元知识点概述 (Ⅰ)知识点概述 二.本单元教学目标 (Ⅰ)重点知识目标 1.ArrayList集合的常用方法2.ArrayList存储数据和遍历数据3.String类的构造方法4.String ...
- node-pre-gyp以及node-gyp的源码简单解析（以安装sqlite3为例）
title: node-pre-gyp以及node-gyp的源码简单解析(以安装sqlite3为例) date: 2020-11-27 tags: node native sqlite3 前言 简单来 ...
- Scala trait特质 深入理解
Scala trait特质 深入理解 初探Scala 特质trait 在Scala中,trait(特质)关键字有着举足轻重的作用.就像在Java中一样,我们只能在Scala中通过extends进行单一 ...
- 使用 PyTorch Lightning 将深度学习管道速度提高 10 倍
前言 本文介绍了如何使用 PyTorch Lightning 构建高效且快速的深度学习管道,主要包括有为什么优化深度学习管道很重要.使用 PyTorch Lightning 加快实验周期的六种 ...