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样式的叠加 ...
随机推荐
- Python测试框架对比----unittest, pytest, nose, robot framework对比
什么是框架? 框架(Framework)是整个或部分系统的可重用设计, 框架是用来解决代码的组织及运行控制问题的. 在我们编写自动化脚本的时候,经常需要读取配置文件,读取数据文件,发送请求,记录日志, ...
- flask项目在Linux运行
依赖安装: 1.flask 2.flask_sqlalchemy --需要安装flask-mysqldb 安装时提示mysql_config not found ,使用:yum install my ...
- 使用Gitmoji进行git commit的快速查阅指南
目录 前言 1. 查阅方法:脚本法 1.1 利用 VS Code 编辑多行文本快速写脚本文件 1.2 给脚本添加可执行权限 1.3 修改环境变量 PATH 使脚本在所有路径下都可以执行(全局执行) 2 ...
- python二级 之 第 五套
1. 这里要注意输入的 就是列表 . [1,2,3] 2. 就是你要明白 random.seed() 产生随机种子# 与random.randint() 取 ...
- 前端快闪三：多环境灵活配置react
你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多 ...
- 解决springboot 配置文件未映射静态资源文件 导致shiro拦截静态资源的问题
---------------------------------------------------------------------------------------------------- ...
- spring 创建Bean最全实现方法
创建bean方式,spring创建bean的方式包含:自动注入方式和人工注入方式.分别为:1)xml 配置化方式 2)@bean注解注入方式3)@Component方式 4)接口注入方式 5)imp ...
- Bert文本分类实践（二）：魔改Bert，融合TextCNN的新思路
写在前面 文本分类是nlp中一个非常重要的任务,也是非常适合入坑nlp的第一个完整项目.虽然文本分类看似简单,但里面的门道好多好多,博主水平有限,只能将平时用到的方法和trick在此做个记录和分享 ...
- 深入思考软件工程，开启 DevOps 之旅
20 世纪 60 年代,软件开始脱离硬件,逐渐成为一个独立产业.至今,软件开发过程从瀑布模型.CMM/CMMI,到 20 年前敏捷的诞生,再到今天 DevOps 的火热,一代代软件人在思考和探索,如何 ...
- 更好的 java 重试框架 sisyphus 入门简介
What is Sisyphus sisyphus 综合了 spring-retry 和 gauva-retrying 的优势,使用起来也非常灵活. 为什么选择这个名字 我觉得重试做的事情和西西弗斯很 ...