【温故知新】CSS学习笔记（三大特性）

CSS三大特性简介

CSS（层叠样式表）三大特性：层叠性、继承性、优先级。

一、CSS层叠性

所谓的层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上面，那么这时候一个属性就会将另一个属性层叠掉。

比如先给某个标签指定了内部文字颜色会红色，接着又指定了颜色为蓝色，那么此时出现了一个标签指定了相同样式的不同值的情况，这类情况我们就称之为样式冲突。

一般情况下，如果出现了样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

1、样式冲突，遵循的原则就是就近原则，哪个样式离着结构近，就执行哪个样式；
2、样式不冲突，则不会层叠；

【样例代码】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>三大特性-层叠性</title><style>div {color: blue;font-size: 25px;}div {color: grey;}</style>
</head>
<body><div>三大特性-层叠性</div>
</body>
</html>

二、CSS继承性

所谓的继承性是指书写CSS样式表的时候，子标签会继承父标签的某些样式（不是全部，一般来说是跟文字相关的属性）。如文本颜色和字号，想要设置一个可继承的属性，只需要将它应用于父元素即可。

恰当的使用继承可以简化代码，降低CSS样式的复杂性，子元素可以继承父元素的样式属性有text-，font-，line-，color等这些元素。

【样例代码】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>三大特性-继承性</title><style>.baba {color: blue; font-size: 50px;}</style>
</head><body><div class="baba"><p>三大特性-继承性</p></div>
</body>
</html>

三、CSS优先级

定义CSS样式的时候，经常会出现两个或者多个规则应用在同一个元素上面的情况，这时就会出现优先级的问题，这个时候会引出“权重”的概念。

继承样式的权重为0，即在嵌套结构中，不管父元素样式的权重有多大，被子元素继承时，它的权重都是0，也就是说子元素定义的样式会覆盖继承过来的样式；
行内样式优先，应用style属性的元素，其行内样式的权重非常高；
权重相同的时候，CSS遵循的就是上面说的就近原则，也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式具有最大的优先级；
CSS中还定义了一个！important命令，该命令被赋予了最大的优先级，也就是说不管权重如何以及样式的位置远近，它的优先级最大。

总结一下权重的知识点：

*继承或者的权重**	0,0,0,0
每个元素（标签）的权重	0,0,0,1
每个类/伪类的权重	0,0,1,0
每个ID的权重	0,1,0,0
每个行内样式的权重	1,0,0,0
每个！important的权重	无穷大（∞）

【样例代码】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>三大特性-优先级</title><style>.baba { /* 权重 0,0,1,0 */color: blue;  }div { /* 权重 0,0,0,1 */color: red;}#yeye { /* 权重 0,1,0,0 */color: pink;}div { /* 权重 ∞ */color: hotpink!important;}* { /* 权重 0,0,0,0 */color: grey;}/* 行内权重 1,0,0,0 */</style>
</head><body>  <div class="baba" id="yeye" style="color: yellow">三大特性-优先级</div>
</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
#nav p	0,1,0,1

数位之间没有进制，比如说：0,0,0,5+0,0,0,5 = 0,0,0,10（而不是0,0,1,0）；

再者需要特别注意的是：继承的权重是0；

【样例代码】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>继承权重为0</title><style>.baba {color: blue!important;}p {color: red;}</style>
</head>
<body><div class="baba"><p>继承的权重为0</p></div>
</body>
</html>

【温故知新】CSS学习笔记（三大特性）相关推荐

CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...

【温故知新】CSS学习笔记（三大特性）

CSS三大特性简介

【温故知新】CSS学习笔记（三大特性）相关推荐

最新文章

热门文章