2020-4-18 前端达人
文章目录
继承性的描述：
继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父类的属性。
例：
<!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>
<!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>
使用结论
由于内容有限，但是结论是一定的，所以我直接给出结论：
若多个选择器定义的样式不冲突，则元素应用所有选择器定义的样式。
若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则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！