简单案例如下,详情参考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>