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样式的叠加 ...
随机推荐
- lumen-phpunit 单元测试
lumen-框架5.8为例 1,把vendor下的bin目录放到环境变量里面: 2,设置路由 $router->get('syn', ['uses' => 'syn\syn@diction ...
- 『GoLang』错误处理
Go 没有像 Java 和 .NET 那样的 try/catch 异常机制:不能执行抛异常操作.但是有一套 defer-panic-and-recover 机制. Go 的设计者觉得 try/catc ...
- 鸿蒙内核源码分析(Shell编辑篇) | 两个任务,三个阶段 | 百篇博客分析OpenHarmony源码 | v71.01
子曰:"我非生而知之者,好古,敏以求之者也." <论语>:述而篇 百篇博客系列篇.本篇为: v71.xx 鸿蒙内核源码分析(Shell编辑篇) | 两个任务,三个阶段 ...
- UOJ#454-[UER #8]打雪仗【通信题】
正题 题目链接:https://uoj.ac/problem/454 题目大意 \(Alice\)有一个长度为\(2n\)的\(01\)串,\(Bob\)有\(n\)个在\([1,2n]\)位置的下标 ...
- 做毕设的tricks
CNKI上无法下载博硕士学位论文的PDF版本,只有CAJ版本,挺恶心的.直接下载安装Chrome extension就可以解决了. 链接:https://share.weiyun.com/5HGFF2 ...
- 使用gitlab runner进行CI（三）：使用sonarqube做c++的静态检查
目录 1. gitlab-ci.yml的配置 1.1 几个基本概念 1.2 使用CI进行代码检查demo 2. Sonarqube安装和配置 2.1 Sonarqube安装 2.2 数据库配置 2.3 ...
- Python爬取 | 王者荣耀英雄皮肤海报
这里只展示代码,具体介绍请点击下方链接. Python爬取 | 王者荣耀英雄皮肤海报 import requests import re import os import time import wi ...
- spoj839 Optimal Marks（最小割，dinic）
题目大意: 给你一个无向图\(G(V,E)\). 每个顶点都有一个int范围内的整数的标记. 不同的顶点可能有相同的标记. 对于边\((u,v)\),我们定义\(Cost(u,v)=mark [u]\ ...
- spoj2 prime1 （区间筛）
给定t组询问,每组询问包括一个l和r,要求\([l,r]\)的素数有哪些 其中\(t \le 10,1 \le l \le r \le 1000000000 , r-l \le 100000\) Qw ...
- 小数的十进制和二进数转换 “无限不循环”小数的IEEE 754表示
十进制 -> 二进制 将整数部分和小数部分分开处理 例:3.125(10) 其整数部分为11(2) 小数部分按照下面的步骤求解: 0.125 x 2 = 0.25 取0 0.250 x 2 = ...