CSS三大特性（129-135 ）

CSS有三个非常重要的三个特性:层叠性、继承性、优先级

一、层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：·

样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式·
样式不冲突,不会层器

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS层叠性</title><style>div {color: red;font-size: 12px;}div {color: pink;}</style>
</head>
<body><!-- 显示pink，根据就近原则 --><div>长江后浪推前浪，浅浪死在沙滩上</div>
</body>
</html>

效果：

二、继承性

2.1 CSS中的继承子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。

恰当地使用继承可以简化代码,降低CSS样式的复杂性。
子元素可以继承父元素的样式( text-, font , line-这些元素开头的可以继承,以及color属性)
继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS继承性</title><style>div {color: pink;font-size: 14px;}</style>
</head>
<body><div><!-- p标签继承了div的属性 --><p>龙生龙,凤生凤,老鼠生的孩子会打洞</p></div>
</body>
</html>

效果：

2.2 行高的继承

行高可以跟单位也可以不跟单位

如果子元素没有设置行高,则会继承父元素的行高为1.5

此时子元素的行高是:当前子元素的文字大小*1.5

body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行高的继承</title><style>body {color: pink;fonts: 12px/1.5 'Microsoft YaHei';}div {/* 子元素继承了父元素body的行高1.5 *//* 这个1.5是当前元素字体大小font-size 的1.5倍，相当于14*1.5=21 */font-size: 14px;}p {/* 当前行高 16 * 1.5 = 24   */font-size: 16px;}</style>
</head><body><div>粉色的回忆</div><p>粉色的回忆</p>
</body>
</html>

效果：

三、优先级

选择器权重如下表：

选择器	选择器权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important 重要的	无穷大

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>优先级</title><style>/* 类选择器 */.test {color: red;}/* 标签选择器 */div {color: pink;!important}/* id选择器 */#demo {color: green;}</style>
</head>
<body><!-- 行内样式style --><div class="test" id="demo" style="color: purple;">你笑起来真好看 </div>
</body>
</html>

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>优先级之权重注意点</title><style>body {color: red;}p {color: pink;}/* a链接浏览器默认制订了一个样式 蓝色的 有下划线的，所以当这个屏蔽后他不会跟着body显示为红色 */a {color:green;}</style>
</head>
<body><div id="father"><p>你还是很好看</p></div><a href="#">我是单独的样式</a>
</body>
</html>

效果：

权重是有4组数字组成，不同权重可以叠加，但是不会有进位。
可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推.
等级判断从左向右,如果某一位数值相同，则判断下一位数值。
可以简单记忆法通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, d选择器100,行内样式表为1000, limportat 穷大.
继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0.

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS优先级之权重叠加</title><style>/* ui li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */ul li {color: green;}/* li 权重 0,0,0,1 */li {color: red;}/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */.nav li {color: pink;}</style>
</head><body><ul class="nav"><li>大猪肘子</li><li>大肘子</li><li>猪尾巴</li></ul>
</body>
</html>

效果：

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

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

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS优先级之权重叠加2</title><style>/* .nav li 权重是 11 */.nav li {color: red;}/* .pink 权重是 10  .nav .pink 权重是20 ，所以要加.nav才能改变成粉色 */.nav .pink {color: pink;font-weight: 700;}</style>
</head>
<body><ul class="nav"><li class="pink">人生四大悲剧</li><li>家里没宽带</li><li>网速不够快</li><li>手机没流量</li><li>学习没WIFI</li></ul>
</body>
</html>

效果：

CSS三大特性（129-135 ）相关推荐

前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
css --- [学习笔记]背景图片小结 css三大特性
源代码参考 1. 行高(line-height) 目标理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居应用使用行高实现单行文字垂直居中能会测量行高 2. CS ...
七、CSS 三大特性（完整详细解析）
** CSS 三大特性(完整详细解析) ** 1.优先级: 定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时, 选择器相同,则执行层叠性选择器不同,就会出现优先级的问题. 1)权重计算 ...
从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
CSS三大特性的利用注意事项
CSS的三大特性目录 CSS的三大特性一.CSS层叠性二.CSS继承性三.CSS优先级总结下面我会依次阐述这三种特性使用时的注意事项与方法. 一.CSS层叠性在对一个元素所设置的多个不同 ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...
【精选】一文搞懂css三大特性
文章目录前言一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用
一.复合选择器 1.后代选择器根据HTML标签的嵌套关系,选择父元素后代中满足条件的子元素: 选择器语法:选择器1 选择器2 {css} 结果:在选择器1中所找到标签的后代(儿子.孙子.重孙子... ...

CSS三大特性（129-135 ）

一、层叠性

二、继承性

三、优先级

CSS三大特性（129-135 ）相关推荐

最新文章

热门文章