目录
CSS继承性
特定的CSS属性会向下传递到子孙元素。
即:“祖先元素设置,后代元素也生效”
<style type="text/css">
.box {
/* 宽300px 无继承性 */
width: 700px;
/* 边框线 无继承性 */
border: 1px solid red;
/*
color、text-align、font-size都有继承性
都可以继承给到其子孙元素
*/
color: red;
text-align: center;
font-size: 14px;
}
.box p {
background-color: khaki;
/* p中自已设置了font-size,所以不会继承父元素的 */
font-size: 20px;
}
</style>
<body>
<div class="box">
<p>我的文字颜色红色和文字水平居中,都是继承于父元素box的</p>
</div>
</body>
效果:
CSS继承性遵循“就近原则”
- 如果元素自身没有设置某个具有可继承的属性,则会向他的父元素继承
- 如果他的父元素没有,则再往上继承父元素的父元素的这个属性,一层层向上找,如果找不到,就以“默认的样式”显示
<style>
.box {
/* width不可继承属性 */
width: 400px;
/* border不可继承属性 */
border: 1px solid #666;
/* text-align 可继承属性 */
text-align: center;
}
.box1 {
/* color 可继承属性 */
color: blue;
}
</style>
<body>
<div class="box">
<div class="box1">
<h3>CSS继承性遵顺“就近原则”</h3>
</div>
</div>
</body>
效果:
如何查看元素的默认值
要了解一个属性的默认值,可以把这个属性值设置为”initial“,然后审查元素,设置面板可以看到其默认值,如”colo:initial;“
可继承属性和不可继承属性
可继承属性
文本相关的属性普遍具有继承性
- 字体系列:font-size、font-famliy、font-style、font、font-weight
- 文本系列:color、text-align、text-indent、line-height、word-spacing、leeter-spacing、text-transform
- 列表布局属性:list-style、list-style-type、list-style-image、list-style-position、等
- 光标属性:cursor光标显示何种形态
- 元素可见性:visibily设置元素可见
不可继承属性
- 盒子模型:display、margin、border、padding、height、min-height、max-height、width、min-width、max-width
- 定位相关:position、left、right、top、bottom、z-index
- 浮动:flow、clear
- 其它:background、overflow、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi
一些特殊情况下的继承
a标签的color值默认不继承
<a>标签是个例外,他的color值不会从父元素中继承,即没有指定的话,默认为“蓝紫色”
<style type="text/css">
/*
.box中文字为红色,
但a标签没有设置color属性,也没有继承父元素的color属性,以默认值出现
*/
.box {
color: red;
}
</style>
<body>
<div class="box">
<a href="">我是超链接</a>
</div>
</body>
效果:
line-height的继承性
line-height的值有三种单位,继承时也不一样:
父元素line-height值 继承规则 子元素hieght-line值 50px 直接继承该值 50px 2 直接继承该比例 2 200% 继承%百分比计算后的值,如果父元素font-size:20px;则计算得到该父元素的line-height值是40px 40px
<style>
.box {
width: 350px;
height: 100px;
background-color: pink;
font-size: 30px;
/* 情况一: 子元素直接继承父元素值 */
line-height: 50px;
/*
情况二: 子元素直接继承父元素值
line-height:2;
*/
/*
情况三: 子元素继承%百分比换算后的值 200%*30=60px
line-height:200%;
*/
}
.item1 {
font-size: 20px;
/* 情况一: 从父元素直接继承过来 line-height:50px; */
/* 情况二:从父元素直接继承过来 line-height:2; 最终2*20px 子元素行高为40px */
/* 情况三:子元素继承父元素%百分比换算后的值60px ,所以子元素line-height:60px */
}
</style>
<body>
<div class="box">
<div class="item1">直接继承父元素的line-height:50px;</div>
</div>
</body>
body标签样式初始化
因为文字相关属性有继承性,所以通常会设置<body>标签的字号、颜色、行高,这样就能当做整个网页的默认样式了
/* 以下代码来自京东 你可能会有疑问,字体类型为什么没有引号引起来 */
body {
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53",
sans-serif;
color: #666;
}
设置继承性
默认不继承的属性想要继承,可以把属性值设置为“inherit”。
表示这个属性的值继承父元素。
扩展补充:
CSS属性通常会有以下三个值
- initial:设置属性值和浏览器默认样式相同
- inherit:属性值默认继承父元素
- unset:是关键字“initial”和“inherit”的组合,如果属性有继承性则继承,没有则为默认值
<style type="text/css">
.box {
width: 100px;
height: 100px;
/* 2px 实线 红色 边框 */
border: 2px solid red;
}
.item {
width: 50px;
height: 50px;
/* 边框是没有继承性的,所以要让他继承父元素的边框样式,就把值设为inherit */
border: inherit;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
效果:
CSS层叠性
- 层叠是CSS的一个基本特征,它是一个定义了如何“合并多个CSS规则的属性值”的算法
- 它在CSS中处于核心地位
什么是层叠性
下面这个例子:
有两个CSS规则同时作用于同一个div标签,那么最后这个div中的属性值是如何合并后计算的,以谁为主呢?这就需要一套规则来解释,这个规则就是“CSS层叠性”
<style>
/* css规则1 */
.box {
color: red;
font-size: 30px;
}
/* css规则2 */
div {
color: blue;
}
</style>
<body>
<div class="box">鞠婧祎</div>
</body>
效果:
层叠性解读
- 层叠性是指多个CSS规则同时作用于同一个标签时,效果“叠加”,并不完全覆盖
- CSS的层叠性有两层含义:“叠加”和“覆盖”
- 不同选择器作用于同一元素,不同属性会“叠加”,相同属性会“覆盖”
- 在“覆盖”时需要遵循:“就近原则”、“优先级”
CSS的叠加原理
不同选择器作用于同一元素,不同属性会叠加作用于元素
<style>
/*
以下三个选择器中的样式属性都不一样,则会叠加
最后div效果:
背景颜色:黄色
字体大小:20像素
字体颜色:红色
*/
div {
background: yellow;
}
#box {
font-size: 20px;
}
.box {
color: red;
}
</style>
<body>
<div class="box" id="box">文本内容</div>
</body>
效果:
CSS的覆盖原则
就近原则
- 当两个或多个“优先级相同”的选择器作用到同一个元元素时。如果出现相同的“属性”则以写在后面的选择器中的“属性”为主
- 所谓的就近原则是指,离html元素最近的那个为主。本质和选择器谁写在后面以谁为主是一个意思
/*
以下两个选择器的优先级一一样,
则相同属性会覆盖,覆盖时,以写在后面的为主
不同属性会叠加。
*/
div {
/* background属性会叠加 */
background: yellow;
/* 无效 */
color: blue;
}
div {
/* font-size属性会叠加 */
font-size: 20px;
/* 选择器优先级一样,以后面为主,则此属性生效 */
color: red;
}
/* 最终的CSS实际效果 */
/*
div{
background:yellow;
font-size:20px;
color:red;
}
*/
优先级
- 当两条或多条原则(选择器)作用到同一个元素,如果出现相同的属性,则以“优先级高”的为主
<style>
/*
基础选择器优先级从高到低分别是: id选择器 >class选择器 >标签选择器
id优先级最高,则最后以id中的color:red为最终显示效果
*/
#box {
/* 生效 */
color: red;
}
.box {
/* 不生效 */
color: blue;
}
div {
/* 不生效 */
color: green;
}
</style>
<body>
<div class="box" id="box">div中内容</div>
</body>
层叠性的冲突处理
- 不同CSS规则集同时作用于同一个标签,不同属性相互叠加,相同属性则会覆盖
- 相同属性覆盖,首先需要计算选择器的权重,最后以选择器权重高的为主
- 如果选择器权重相同,则写在后面的会覆盖现在前面的
- 如果想要实现的效果,因为选择器的权重低而不生效,则通过提高选择器权重来达到效果
<style>
/* id权重最高,样式全部应用 */
#box {
width: 200px;
}
/*
.box与.box2权重一样,相同属性叠加,不同属性,以写在后面的为主
最后生效样式:
color:orange; background:skyblue; font-size:30px
*/
.box {
color: blue;
background-color: skyblue;
}
.box2 {
color: orange;
}
/*
div权重低于.box和.box2,相同属性叠加,不同属性,以权重高的为主
则color不生效,font-size属性生效
*/
div {
color: green;
font-size: 30px;
}
/*
计算后最终生效样式
width:200px;
color:orange;
background-color:skyblue;
font-size:30px;
*/
</style>
<body>
<div class="box2 box" id="box">文本内容</div>
</body>
效果:
CSS优先级
- 当多个CSS规则集同时作用于同一个HTML标签时,不同属性会叠加,相同属性会发生覆盖
- 在发生覆盖时,浏览器通过“选择器的优先级”来判断以哪个选择器中的属性值为主,从而在该元素上应用这些属性值。
单个CSS选择器的优先级权重
- 单个选择器权重从高到低为:“id选择器” -> “class选择器” -> “标签选择器” -> “通配符选择器”
- 不同类型的选择器有不同的分数值,分数值越高,选择器的权重越高,下表所示:
选择器的类型 | 实例 | 选择器权重 | 等级 |
---|---|---|---|
!important | div{color:red!important;} | 无穷大 | 特级 |
行内样式(style属性中样式) | style="color:red;" | 1000 | 第一等级 |
id选择器 | #id | 0100 | 第二等级 |
class、伪类、属性选择器 | .box、:hover、[type="text"] | 0010 | 第三等级 |
标签选择器、伪元素选择器 | div、::after、::before | 0001 | 第四等级 |
通配符、子选择器、相邻选择器等 | *、>、+、~ | 0000 | |
继承的样式 | 0000 |
提示:
* 通配符的权重实际是要大于继承的样式的
复杂CSS选择器的优先级权重
- 优先级就是分配给指定的CSS声明的一个权重
- 选择器的优先级是由一个选择器中的每一种“选择器类型的数值(权值)” 相加的最终结果来决定
- 一个选择器的优先级是由四个部分相加计算得来的(数值越大,代表选择器的优先级越高)
选择器 千位 百位 十位 个位 优先级 行内样式
如:<p style="color:red"></p>
1 0 0 0 1000 div p
0 0 0 2 0002 #box div p
0 1 0 2 0102 .box .item h3
0 0 2 1 0021 .box:hover p
0 0 2 1 0021
几个案例
案例1:
鼠标放在p标签上,文字会变成红色吗?
<style>
/* 优先级 0011 */
p:hover {
color: red;
}
/* 优先级 0011 */
.box p {
color: blue;
}
/*
两选择器优选级相同,都是0011 ,则以写在后面的为主,相同属性发生覆盖。
则最终效果为 blue蓝色,鼠标滑上去文字并不会变色
*/
</style>
<body>
<div class="box">
<p>文本内容</p>
</div>
</body>
答:
鼠标滑动到p上面,文字并不会变成红色
案例2:
以下案例中的p标签的最终显示效果是怎样的
<style>
/* 优先级:100 */
#title {
color: red; /*生效*/
}
/* 优先级:20 */
.box .title {
/* 不生效,以#title为主 */
color: blue;
}
/* 优先级:10 */
.title {
/* 生效 */
font-size: 16px;
}
/* 优先级:2 */
div p {
/* 不生效,以.title中为主 */
font-size: 40px;
}
</style>
<body>
<div class="box">
<p id="title" class="title">p中内容</p>
</div>
</body>
答:
案例3:
<p>标签中的文字最终是什么颜色?
<style>
/* 单个选择器类型优先级从高到低:id > class > 标签 */
/* 优先级 0201 */
#box1 #box2 p {
color: red;
}
/* 优先级 0212 三个中优先级最高,则以他为主 */
#box1 div.box2 #box3 p {
color: green;
}
/* 优先级 0031 */
.box1 .box2 .box3 p {
color: blue;
}
</style>
<body>
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">
<p>我是一个段落标签</p>
</div>
</div>
</div>
</body>
答:
绿色
总结
- 在进行选择器权重计算时不允许进行进位
- 例如,20个类选择器仅仅意味着20个十位,而不能视为2个百位,也就是说,无论多少个类选择器的叠加,都不会超过一个ID选择器
- 在比较选择器优先级时,从左向右比较。
!important 提升权重
- 当在一个样式声明中使用一个“!improtant”规则时,此声明将覆盖任何其他声明,包括行内样式
- 虽然,从技术上讲,!important与优先级无关,但它与最终的结果直接相关
<style>
div {
color: red !important;
}
#box {
color: orange;
}
</style>
<body>
<div style="color: blue">文本内容</div>
</body>
效果:
注:
- 只要CSS声明属性值的后面带有!important就一定以它为主
慎用!important
- 慎用!important,因为这会带来样式冲突。后面某个地方,需要重写这个样式时,会发现根本无效。
- 在某些情况下是一定要用的,比如之前学的自定义字体,font-famlit属性后面加了!important关键字
添加!important的属性,如果可以继承,那么优先级仍然按照“普通继承(0000)”来计算,并不会造成子孙元素也强制!important
<style>
#box {
height: 100px;
background-color: red !important;
}
#box1 {
height: 50px;
background-color: aqua;
}
</style>
<body>
<div id="box">
<div id="box1"></div>
</div>
</body>
效果:
测试题
1.看代码回答三个问题
- 鼠标移动到<span>上时,<span>中的文字有没有放大和变红?为什么?
- 鼠标移动到<span>上时,想实现文字变红,如何修改代码达到效果?
- <span>标签最终的效果是什么?
<style>
.box {
font-style: italic;
}
.box p span {
color: blue;
}
span:hover {
color: red;
font-size: 30px;
}
</style>
<body>
<div class="box">
<p><span>我是span中内容</span></p>
</div>
</body>
答案:
- <span>中的文字并不会放变红,因为选择器{.box p span}的优先级是(0012),而选择{span:hover}的优先级是(0011),因此{span:hover}无效,但是会变大(只有{span:hover}中出现了font-size属性)
/* 方法一:修改原先选择器 */ <style> .box { font-style: italic; } .box p span { color: blue; } .box p span:hover { color: red; font-size: 30px; } </style> <body> <div class="box"> <p><span>我是span中内容</span></p> </div> </body> /* 方法二:使用id选择器 */ <style> .box { font-style: italic; } .box p span { color: blue; } #myspan:hover { color: red; font-size: 30px; } </style> <body> <div class="box"> <p><span id="myspan">我是span中内容</span></p> </div> </body> /* 方法三:使用!important关键字 */ <style> .box { font-style: italic; } .box p span { color: blue; } #myspan:hover { color: red !important; font-size: 30px; } </style> <body> <div class="box"> <p><span id="myspan">我是span中内容</span></p> </div> </body>
- 文字一直为蓝色,鼠标移动到文字上时,会放大但不会变为红色
2.下面<span>文字颜色是什么?
<style>
.col {
color: red;
}
div p span {
color: blue;
}
</style>
<body>
<div>
<p><span>span标签的文字颜色</span></p>
</div>
</body>
答案:
<span>颜色为蓝色,选择器{.col}并没有作用于<span>标签
3.鼠标移动到a标签,a标签中文字能不能变成黄色
<style>
/* 12 */
li a:hover {
color: yellow;
}
/* 12 */
.list li a {
color: orange;
}
</style>
<body>
<ul class="list">
<li><a href="">艾编程</a></li>
</ul>
</body>
答案:
不能变成黄色,两个CSS选择器的优先级都是(0012),故遵循“就近原则”,选择器{,list li a}离<body>标签更近(在下面),所以不会变成黄色
4.以下的li和a中的文字的颜色区别
<style>
/* 2 */
ul li {
color: red;
}
/* 2 */
ul > li {
color: orange;
}
</style>
<body>
<ul class="list">
<li>点击进入<a href="">艾编程</a></li>
</ul>
</body>
答案:
两个选择器的优先级都是(0002),故遵循“就近原则”,<li>中的文字颜色为“orange橘色”
5.CSS美化开关按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.check-button {
width: 60px;
height: 26px;
padding: 2px;
background-color: #ddd;
border-radius: 20px;
}
input {
display: none;
}
.check-button::after {
display: inline-block;
content: "";
width: 26px;
height: 26px;
background-color: #fff;
border-radius: 100%;
}
input:checked ~ .check-button {
background-color: skyblue;
}
input:checked ~ .check-button::after {
float: right;
}
</style>
</head>
<body>
<label for="my-button">
<input type="checkbox" id="my-button">
<div class="check-button"></div>
</label>
<br>
<label for="my-button2">
<input type="checkbox" id="my-button2">
<div class="check-button"></div>
</label>
</body>
</html>
效果: