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样式的叠加 ...
随机推荐
- 【转载】在Windows终端中显示UTF-8字符
一直苦恼于如何在Windows终端中显示UTF-8字符的问题.比如,在MySQL命令行下,如果数据库的编码是UTF-8,那么,在查询数据库的时候,里面的中文都会变成乱码.今天半无意的搜索了一下,结果发 ...
- 鸿蒙内核源码分析(中断切换篇) | 系统因中断活力四射 | 百篇博客分析OpenHarmony源码 | v42.02
百篇博客系列篇.本篇为: v42.xx 鸿蒙内核源码分析(中断切换篇) | 系统因中断活力四射 | 51.c.h .o 硬件架构相关篇为: v22.xx 鸿蒙内核源码分析(汇编基础篇) | CPU在哪 ...
- 高级测试必备技能,Jenkins
Jenkins安装 前言 Jenkins是一个广泛用于持续构建的可视化web工具,就是各种项目的的"自动化"编译.打包.分发部署,将以前编译.打包.上传.部署到Tomcat中的过程 ...
- 03-Jwt在.netcore中的实现
1)jwt的加密解密过程 jwt验证的核心就是加密解密的过程,掌握了这个过程,也就掌握了jwt的原理.jwt的三部分中,header和payload是明文的,能够直接读出来,签名Signature部分 ...
- AngularJS的简单实用
Angular Js 的初步认识和使用 一: 1.模块化 定义模块和控制器 ng-app="myapp" controller=&qu ...
- 数字图像处理(一)之灰度转换和卷积python实现
使用Python实现数字图像处理中如下功能: 彩色图像转成灰度图像 实现图像的相关&卷积操作 实现图像的高斯核卷积 使用的库和python版本如下: imageio:2.9.0 用于读取磁盘中 ...
- SpringBoot之日志注解和缓存优化
SpringBoot之日志注解和缓存优化 日志注解: 关于SpringBoot中的日志处理,在之前的文章中页写过: 点击进入 这次通过注解+Aop的方式来实现日志的输出: 首先需要定义一个注解类: @ ...
- 【Docker】(10)---详细说说 Dockerfile文件
一.基础概念 1.基本概念 Dockerfile 是一个文本文件,其内包含了一条条的指令,每一条指令构建一层,因此每一条指令的内容,就是描述该层应当如何构建.有了 Dockerfile,当我们需要定制 ...
- SpringCloud 2020.0.4 系列之Eureka
1. 概述 老话说的好:遇见困难,首先要做的是积极的想解决办法,而不是先去泄气.抱怨或生气. 言归正传,微服务是当今非常流行的一种架构方式,其中 SpringCloud 是我们常用的一种微服务框架. ...
- nssm.exe使用方法
nssm no-sucking service manager 1. 安装服务命令 nssm install <servicename> nssm install <servicen ...