1. 程式人生 > >css--------div > li > a{}和div li a{}的區別(有尖括號和無尖括號)

css--------div > li > a{}和div li a{}的區別(有尖括號和無尖括號)

初學者,今天第一次看到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,其它字型沒有變;