css--------div > li > a{}和div li a{}的區別(有尖括號和無尖括號)
阿新 • • 發佈:2018-12-25
初學者,今天第一次看到css檔案中這樣的寫法:nav .primary_nav > li > a{font-size:16px;}
很奇怪li和a前邊的“>”尖括號是什麼意思,經過嘗試總結如下:
html程式碼:
<div class="navigation_container"> <!--Navigation Starts--> <nav> <ul class="primary_nav"> <li><a href="leisure_listing.html">Women</a> <!--SUbmenu Starts--> <ul class="sub_menu"> <li> <a href="#">Dresses</a> <ul> <li><a href="#">Skirts</a></li> <li><a href="#">Shorts</a></li> </ul> </li> <li> <a href="#">Accessories</a> <ul> <li><a href="#">Sunglasses</a></li> <li><a href="#">Scarves</a></li> </ul> </li> </ul> <!--SUbmenu Ends--> </li> <li><a href="leisure_listing.html">Men</a> <!--SUbmenu Starts--> <ul class="sub_menu"> <li> <a href="#">Men Summer Collection</a> <ul> <li><a href="#">Premium Pants</a></li> <li><a href="#">Khakis</a></li> </ul> </li> <li> <a href="#">Accessories</a> <ul> <li><a href="#">Sunglasses</a></li> <li><a href="#">Scarves</a></li> </ul> </li> </ul> <!--SUbmenu Ends--> </li> </ul> </nav>
</div>
css程式碼如下:
nav .primary_nav > li > a{font-size:16px;}
那麼:
nav .primary_nav > li > a{font-size:16px;} 和 nav .primary_nav li a{font-size:16px;}的寫法有什麼區別呢?
1. nav .primary_nav li a{font-size:16px;}的寫法是:將.primary_nav 下邊的所有li下的所有a獲取到,並改變字型大小為16px;
那麼,根據上邊的html程式碼,這裡邊所有的字都變成16px的了。
2.nav .primary_nav > li > a{font-size:16px;}的寫法是:將.primary_nav 下邊的子級目錄下的a連結字型改成16px;
那麼,效果是,“Women”和“Men”的字型變成了16px,其它字型沒有變;