样式的继承
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被它的后代元素所继承，利用继承可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式，但是并不是所有的样式都给会被子元素所继承【比如：背景相关的样式,边框相关的元素，定位相关的元素都不会被继承】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>样式的继承</title>
<style type="text/css">
body{
font-size:30px;
}
</style>
</head>
<body>
<!--<p style="font-size:30px;"> p元素中的文字和span中的文字的字体都变为30px
我是p标签中的文字
<span>我是span标签中的文字</span>
</p>-->
<p style="font-size:30px; background-color:yellow;">
我是p标签中的文字
<span>我是span标签中的文字</span>
</p>
<span>我是p元素外的span</span>
</body>
</html>
选择器的优先级
当使用不同的选择器，选中同一个元素并且设置同样的样式时，样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示
优先级的规则：
- 内联样式（行内样式），优先级1000
- id选择器，优先级100
- 类和伪类，优先级10
- 元素选择器，优先级1
- 通配*，优先级0
- 继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，但是注意，选择器的优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用 靠后 的样式
可以在样式的最后添加一个!important,则此时改样式将会获得一个最高的优先级，将会优先于所有的样式选择器，甚至高于内联样式,但在开发中尽量避免使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器的优先级</title>
<style type="text/css">
.p1{
background-color:yellow;
}
p{
background-color:red;
}
#p2{
background-color:yellowgreen;
}
/*
* 并集选择器的优先级时单独计算的
* div,p,#p1,.hello{}
*/
*{
font-size:50px;
}
p{
font-size:30px;
}
#p3{
background-color:yellowgreen;
}
p#p3{/*交集选择器*/
background-color:red;
}
.p1{
color:yellow;
}
.p3{
color:green;
background-color:greenyellow !important;
}
</style>
</head>
<body>
<p class="p1" id="p2" style="background-color:blue;">我是一个段落
<span>我是p标签中的span</span>
</p>
<p class="p1 p3" id="p3" style="background-color:orange;">我是一个段落
<span>我是p标签中的span</span>
</p>
</body>
</html>
伪类的顺序
涉及到a的伪类一共有四个：
:link:visited:hover:active
而这四个选择器的优先级是一样的hover不要写在active下面，因为它们的优先级一样，写在下面的优先级要高一些，如果hover写在了下面那么active相当于失效link和visited必须在hover和active的前面，否则hover，active失效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪类的顺序</title>
<style type="text/css">
a:link{
color:yellowgreen;
}
a:visited{
color:red;
}
a:hover{/*鼠标移入*/
color:blue;
}
a:active{/*正在点击*/
color:green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br /><br />
<a href="http://www.baidu,com123456">未访问过的链接</a>
</body>
</html>
转载：https://blog.csdn.net/weixin_44679038/article/details/101456284
查看评论