<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.li{color: #25A725;}
.li #a{color: #25A725;}
</style>
</head>
<body>
<ul>
<li id="li1">li1</li>
<li id="li12">li12</li>
<li id="li11">li11</li>
<li id="li13" class="li"><span>li13</span></li>
<li id="li15" class="li"><a href="#">li15</a> </li>
<li id="li15" class="li"><a href="#" id="a">li17</a> </li>
<li id="li18">li18</li>
</ul>
</body>
</html>
因为a标签不能继承样式,所以
.li #a{color: #25A725;}重新设置
1、结论:由于CSS的层叠(cascading),a元素继承自li的样式(color:#25A725)被浏览器的a元素的默认样式给覆盖了。
2、理由:
看图:
图一:

图二:

由以上两个图可以知道:
1、浏览器本身对a元素有默认样式(user agent stylesheet)(图二),对span元素没有默认样式(图一)
2、由于CSS的层叠,a元素red颜色继承自div(Inherited from div)被划掉了(图二)。
3、涉及到的知识点:
1、浏览器本身对a元素有默认样式(user agent stylesheet)(图二),对span元素没有默认样式(图一)
2、由于CSS的层叠,a元素red颜色继承自div(Inherited from div)被划掉了(图二)。
3、涉及到的知识点: