CSS有三大特性,分别是 继承性,层叠性,优先级。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>
div{
color: blue;
}
</style>
</head>
<body>
<div>父元素
<div>子元素
<p>我依旧是子元素</p>
</div>
</div>
</body>
</html>
效果如下:
有图可见,被div包裹住的元素,都具有了div的css样式属性,这被我们称为继承性。
在CSS中以,text-,font-,line-
开头的属性都是可以继承的。
CSS继承的局限性
并不是所有的CSS属性都可以被继承的,以下就不具有继承性:
a标签
的字体颜色不会被继承,a标签
的字体颜色是不会改变的,可以通过页面的的F12
可以查看到,a标签
是有一个默认的color:-webkit-link;
字体颜色属性,所以父元素设置颜色是不能发生改变a标签
字体的颜色。h标签
的字体的大小也是不能被继承的,如下代码给父元素在设置一个字体属性20px
,再添加一个h标签
,在浏览器中可以发现h标签
中字体的大小是不会发生改变的,因为h标签
中有一个默认的font-size:1.5em;
字体大小属性。div标签
的高度如果不设置由内容来绝对(没有内容高度未0),宽度默认由父元素继承过来- 边框属性
- 外边距属性
- 内边距属性
- 背景属性
- 定位属性
- 布局属性
- 元素宽高属性
层叠性
层叠性的使用说明
层叠性的表述
所谓层叠性是指多种CSS样式的叠加,例如,当使用内嵌式CSS样式表定义p标记
字号大小为12像素,ID选择器定义p标记
颜色为红色,那么段落文本将显示为12像素红色,即这两种样式产生了叠加。
例:
<!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>
p{
font-size: 32px;
}
</style>
</head>
<body>
<p style="color: blue;">我这里体现了层叠性呀</p>
</body>
</html>
效果如下:
由图可见,p标签
的文字,颜色变为了blue
,并且字体大小成了32px
,体现了层叠性。
使用结论
由于内容有限,但是结论是一定的,所以我直接给出结论:
- 若多个选择器定义的样式不冲突,则元素应用所有选择器定义的样式。
- 若多个选择器定义的样式发生冲突(比如:同时定义了字体颜色属性),则CSS按照选择器的优先级,让元素应用优先级搞得选择器样式。
- CSS定义的选择器优先级从高到低为:行内样式–>ID样式–>类样式–>标记样式。
- 如若想直接定义使用哪个样式,不考虑优先级的话,则使用
!important
,把这个加在样式后面就行了。
优先级
定义CSS样式时,经常出现两个或更多规则应用在同一个元素上,这时就会出现优先级的问题。层叠性和选择器的圈中有很大的关系。
优先级的使用说明
权重分析:
- 内联样式:如:
style=""
,权重为1000。 - ID选择器,如:
#content
,权重为100。 - 类,伪类和属性选择器,如
.content
,权重为10。 - 标签选择器和伪元素选择器,如
div p
,权重为1。 继承样式,权重为0。
将基本选择器的权重相加之和,就是权重大小,值越大,权重越高。
计算权重方法
数标签:先数权重最高的标签,然后数第二高权重的标签,以此类推,就会生成一个数组,里面包含四个数字。
比如(0,0,0,0)分别对应(行内式个数,id选择器个数,类选择器个数,标签选择器个数)
然后两个选择器通过对别四个数字的大小,确定权重关系。
例:
#box ul li a.cur
有1个id标签,1个类,3个标签,那么4个0就是(0,1,1,3)
.nav ul .active .cur
有0个id,3个类,1个标签,那么4个0就是(0,0,3,1)
例:
<!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>
.p1{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p1">我们来试一下优先级</p>
</body>
</html>
先推测一波,因为前面讲到了ID选择器的权重是大于类选择器的,所以这里颜色应该为red。
效果如下:
推测正确!优先级GET!
编程我也是初学者,难免有理解错误的地方,希望大家看完之后,发现错误可以评论出来,谢谢大家