瞭解css中的類

Question

我剛開始學習css。我假設一個班級是分組造型信息的一種方式。

我想了解CSS分頁。在該示例中，它被寫入

ul.pagination { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

ul.pagination li { display: inline;} 

ul.pagination li a { 
    color: black; 
    float: left; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

pagination是一類。當他們寫ul.pagination li和 ul.pagination li a是什麼意思？

ul.pagination li a有float left;風格。這將實現什麼？

Answer 1

當你有你的HTML文檔中的下列代碼塊：

<ul class="pagination"> 
    <li> 
     <a href="#"></a> 
    </li> 
    <li> 
     <a href="#"></a> 
    </li> 
    <li> 
     <a href="#"></a> 
    </li> 
</ul> 

，你會喜歡的風格此列表，列表項和單獨的鏈接。

ul.pagination { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

上面的CSS塊會影響您的列表（<ul></ul>）。

ul.pagination li { 
    display: inline; 
} 

這一個會影響列表中的每個列表項（<li></li>）。

ul.pagination li a { 
    color: black; 
    float: left; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

最後一個會影響列表項中的每個鏈接（<a></a>）。

float: left用於具有水平列表（例如菜單）。你可以學習從這個鏈接更多：http://www.w3schools.com/cssref/pr_class_float.asp

最後，我也建議你閱讀CSS選擇器，以理解其中的邏輯：http://www.w3schools.com/cssref/css_selectors.asp

Answer 2

我建議你閱讀CSS選擇器的權威來源：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

請注意，術語「選擇器」既指規則的選擇器（在{之前的所有內容），也指代選擇器的各個組件，因此h1.foo p.bar是選擇器，例如僅爲h1.foo和p.bar）。

在回答您的問題直接：

這是什麼意思時，他們寫ul.pagination li和ul.pagination li a？

當一個空格字符出現兩個選擇器之間（例如ul.pagination和li之間它的意思是「descendant」，所以出現一個<ul class="pagination">下方任何<li>元件將被匹配，不管它是怎麼深（相到>選擇器，如在ul.pagination > li，其中僅選擇<li>元素是<ul class="pagination">直接子。

CSS規則匹配，並且只適用於最深的元素在規則，所以ul li只適用樣式規則的<li>，但ul li a只適用樣式規則<a>元素。

ul.pagination li a有一個float left;風格。這將實現什麼？

這意味着每個<a>元件是一個<li>，後者又是的後代一個<ul class="pagination">的後代將具有屬性float: left施加到其上。