继承:
/* 样式的继承(继承祖先的资产)
定义:给父元素或者祖先元素设置有关样式,它会继承到子元素或后代元素上,
优势:一般情况下,样式的继承是对我们开发是有利,不需要额外调整
注意:不是所有的样式都能继承,一般情况布局上样式
*/
/* 共同的祖先元素,设置统一的字体大小、字体颜色、行高、字体等 */
body{
font-size: 12px;
color: #3c3c3c;
}
p{
color: red;
font-size: 30px;
}
选择器的权重:
<!-- 经典面试题:你常用的选择器有哪些?能否说一下他们之间的权重问题? -->
<!--
样式冲突:给同一个元素设置相同的样式名,不一样的样式值,最终哪个样式有效果,
是看选择器的权重,谁的权重高,就有效果
选择器的权重
内联样式 1000
id选择器 100
class选择器/属性选择器 10
元素选择器 1
通配选择器 0
继承样式 没有权重
注意:
1、如果选择器的权重一样,那么谁靠下,就谁生效
2、要让所有选择器的权重相加,最终谁大听谁的
3、所有的选择器权重相加,最高也不会超过上一等级的权重,如再多的类选择器权重相加,也不会超过id选择器权重
4、在并集选择器(群组选择器)当中,选择器权重是各算各的,最终谁大听谁的
5、!important 是最高的权重 但慎用
一般情况下,可以测试使用,测试是否是选择器权重的问题
-->
<!--
如果样式设置不成功:
1、你没选中
2、选择器权重问题 !important进行测试
-->
<!-- 需求:设置div的背景色 -->
<style>
/* body{
background-color: lawngreen;
} */
/* *{
background-color: rgb(82, 82, 228);
} */
/* div,.dd{
background-color: green;
}*/
/* .dd.d1.d1.d3{
background-color: red;
} */
/* #dv{
background-color: pink;
} */
/* [id]{
background-color: hotpink;
} */
.dd>span{
color: green;
}
#dv span{
color: red;
}
<!-- 选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器/属性选择器 10
元素选择器 1
通配符、子选择器、相邻选择器等。如*、>、+ 0000
继承的样式 没有优先级
!important 最高优先级
注意:
比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先显示
(并集选择器)分组选择器是单独计算的
如果优先级计算后相同,此时则优先使用靠下的样式
选择器的累加,不会超过上一级数量级,例如:类选择器再高也不会超过id选择器 量变达不到质变
一般来说:
选择器越具体,优先级越高
!important 慎用
-->