CSS 是一種常用的前端樣式語言,選擇器是用來指定 CSS 樣式的重要組成部分。為了方便有效地編寫 CSS 樣式,需要遵守選擇器的規范。
在 CSS 選擇器規范中,選擇器是用來匹配樣式表中的 HTML 元素的。以下是 CSS 選擇器的一些規范:
// 根據類名設置樣式 .class{ ... } // 根據id設置樣式 #id{ ... } // 根據元素類型設置樣式 element{ ... } // 根據元素屬性設置樣式 [attribute]{ ... } // 根據元素屬性與屬性值設置樣式 [attribute=value]{ ... } // 嵌套選擇器設置樣式 parent element{ ... } // 后代選擇器設置樣式 parent >element{ ... } // 相鄰兄弟選擇器設置樣式 element + element{ ... } // 兄弟選擇器設置樣式 element ~ element{ ... }
選擇器的組合可以實現更加豐富的樣式匹配,例如:
// 組合元素類型和類名(選擇所有類名為 class 的 p 元素) p.class{ ... } // 組合元素類型和 id(選擇 id 為 id 的 div 元素) div#id{ ... } // 組合后代選擇器和屬性選擇器(選擇所有帶有 title 屬性的 div 元素下的 p 元素) div [title] p{ ... } // 組合父元素和子元素(選擇 id 為 id 的 div 元素下的所有 ul 元素) div >ul{ ... }
總之,在編寫樣式時,要靈活運用選擇器組合,提高樣式匹配的精確度。