CSS中的各個選擇節點，都有樣式最後一個無樣式的快捷解決方法

品讀夜的黑發表於2015-03-06
CSS

2.1.3 多標籤

　　多標籤選擇器一般和html上下文有關，它有以下集中分類

  1. 選擇一個祖先的所有子孫節點，例如 div p{…}
  2. 選擇一個父元素的所有直屬節點，例如 div > p{…}
  3. 選擇某一個元素緊挨著的兄弟節點，例如 li + li{…}
  4. 選擇某一個元素的所有同胞節點，例如 span ~ a{…}
  5. 以上各種情況的組合應用（不要組合過於複雜，編碼講求可讀性第一）

 

　　給大家列舉一個比較典型的應用，如下圖

　　

　　上圖中的效果應該比較常見，在各個選單之間加下劃線。我之前的實現是：每個li都加一個border-bottom，在把最後一個li的border-bottom去掉。

　　其實完全沒必要這樣麻煩，下面一個樣式設定即可解決：

　　

 

兄弟選擇節點第一個li沒選中，後面的都選中了

 

 

前面提到，為盒子模型設定寬度，結果只是設定了內容的寬度，這個不合理。如何解決這一問題？答案就是：box-sizing:border-box

　　

　　如上圖，div設定了box-sizing:border-box之後，300px的寬度是內容 + border + 邊框的寬度（不包括margin），這樣就比較符合我們的實際要求了。

　　建議大家在為系統寫css時候，第一個樣式是：

      

　　大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 選擇器中，我們為什麼不這樣做呢？

相關文章