简单案例如下，详情参考MDN
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a p {color: red;}
.b p {color: orange;}
.c p {color: yellow}
.c {color: yellow;}
.d {color: green;}
.e {color: blue;}
.f {color: blueviolet;}
p.f {color: violet;}
p {color: pink}
/* p.f{color: violet;} 紫罗兰紫色 浏览器无法识别??? 错，可以识别！！！*/
</style>
</head>
<body>
<div class="a">
<div class="b">
<p>爷div样式a，父div样式b，本身无样式的P元素</p>
</div>
</div>
<div class="b">
<div class="a">
<p>爷div样式b，父div样式a，本身无样式的P元素</p>
</div>
</div>
.b p {color: orange;}在css表中后写入，比.a p优先级高</br>
---------------------------------------------------------------
<div class="">
<div class="a">
<p>父子元素的.a p样式组合 优先于 P元素全局默认的p {color: pink}</p>
<p class="c">父子元素的.a p样式组合 优先于 P元素自定义的.c样式</p>
</div>
<p class="d">无父元素样式影响，自定义.d样式的P元素</p>
</div>
--------------------------------------------------------------
<div class="c">
<div class="">父div有.c样式 本身无样式的div</div>
<div class="d">父div有.c样式 本身有.d样式的div 自身的.d优先</div>
<p class="e">父div有.c样式 本身有.e样式的p元素 .c p {color: yellow}优先 .e单独的类选择器</p>
<p class="f">父div有.c样式 本身有.f样式的p元素 .c p {color: yellow} 低于p.f样式组合（元素+类 选择器）紫色</p>
</div>
<div class="f">本身有.f 靛色样式的div元素</p>
<p>P元素全局默认的p {color: pink}</p>
</body>
</html>
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
