關(guān)于em的設置及顯示效果的問題。為什么選擇器用em 或者.topList em 的效果與用.topList ul em或.topList li em的效果不一樣？
關(guān)于em的設置及顯示效果。為什么選擇器用em 或者.topList em 的效果與用.topList ul em或.topList li em的效果不一樣。
如果用的是.topList em 或em 效果是這樣的：
<title>新聞中心制作練習</title>
????<style?type="text/css">
????/*在此定義相關(guān)CSS樣式*/
????*{
????????margin:?0;
????????padding:?0;
????????font-size:?12px;
????????font-family:?"微軟雅黑";
????}
????.topList{
????????width:300px;
????????height:180px;
????????border:1px?solid?#E8E8E8;
????????margin:?10px?auto;
????}
????.topList?ul{
????????padding:?5px;
????}
????.topList?li{
????????list-style-type:?none;
????????height:?30px;
????}
????.topList?em{
????????width:?20px;
????????height:?16px;
????????background:?url("http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg")?no-repeat;
????????display:?block;
????????text-align:?center;
????????font-style:?normal;
????????color:?#333;
????????background-position:?0?-16px;
????????float:?left;
????}
????.top?em{
????????color:#FFF;
????????background-position:0?0;
????}
????p{
????????float:?left;
????}
????/*超鏈接狀態(tài)*/
????.topList?li?a:link,?.topList?li?a:visited{
????????text-decoration:?none;
????????color:?#5e5e5e;
????}
????.topList?li?a:hover,?.topList?li?a:active{
????????text-decoration:underline;
????????color:?#b52725;
????}
????</style>
</head>
<body>
????<div?class="topList">
????????<ul>
????????????<li?class="top"><em>01</em><p><a?href="http://idcbgp.cn/"?>【慕客訪談用戶篇】“有為屌絲”在路上</a></p></li>
????????????<li?class="top"><em>02</em><p><a?href="http://idcbgp.cn/">【有獎活動】給父親的三行書信</a></p></li>
????????????<li?class="top"><em>03</em><p><a?href="http://idcbgp.cn/">《程序猿，請曬出你的童年》活動獲獎公告</a></p></li>
????????????<li><em>04</em><p><a?href="http://idcbgp.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p></li>
????????????<li><em>05</em><p><a?href="http://idcbgp.cn/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p></li>
????????????<li><em>06</em><p><a?href="http://idcbgp.cn/">【問卷調(diào)查】慕課網(wǎng)用戶學習情況大調(diào)查</a></p></li>
????????</ul>
????</div>
</body>
如果換成.topList ul em或.topList li em，顯示效果就出問題啦，變成這樣子了：
<title>新聞中心制作練習</title>
????<style?type="text/css">
????/*在此定義相關(guān)CSS樣式*/
????*{
????????margin:?0;
????????padding:?0;
????????font-size:?12px;
????????font-family:?"微軟雅黑";
????}
????.topList{
????????width:300px;
????????height:180px;
????????border:1px?solid?#E8E8E8;
????????margin:?10px?auto;
????}
????.topList?ul{
????????padding:?5px;
????}
????.topList?li{
????????list-style-type:?none;
????????height:?30px;
????}
????.topList?li?em{
????????width:?20px;
????????height:?16px;
????????background:?url("http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg")?no-repeat;
????????display:?block;
????????text-align:?center;
????????font-style:?normal;
????????color:?#333;
????????background-position:?0?-16px;
????????float:?left;
????}
????.top?em{
????????color:#FFF;
????????background-position:0?0;
????}
????p{
????????float:?left;
????}
????/*超鏈接狀態(tài)*/
????.topList?li?a:link,?.topList?li?a:visited{
????????text-decoration:?none;
????????color:?#5e5e5e;
????}
????.topList?li?a:hover,?.topList?li?a:active{
????????text-decoration:underline;
????????color:?#b52725;
????}
????</style>
</head>
<body>
????<div?class="topList">
????????<ul>
????????????<li?class="top"><em>01</em><p><a?href="http://idcbgp.cn/"?>【慕客訪談用戶篇】“有為屌絲”在路上</a></p></li>
????????????<li?class="top"><em>02</em><p><a?href="http://idcbgp.cn/">【有獎活動】給父親的三行書信</a></p></li>
????????????<li?class="top"><em>03</em><p><a?href="http://idcbgp.cn/">《程序猿，請曬出你的童年》活動獲獎公告</a></p></li>
????????????<li><em>04</em><p><a?href="http://idcbgp.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p></li>
????????????<li><em>05</em><p><a?href="http://idcbgp.cn/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p></li>
????????????<li><em>06</em><p><a?href="http://idcbgp.cn/">【問卷調(diào)查】慕課網(wǎng)用戶學習情況大調(diào)查</a></p></li>
????????</ul>
????</div>
</body>
2016-05-02
? ? ? ? 選擇器權(quán)值問題；標簽權(quán)值為1；類選擇符權(quán)值為10；id選擇器符權(quán)值最高，大概為100；繼承的權(quán)值最低；
最后會應用權(quán)值相加最高那個樣式，前提是寫正確。