CSS樣式表是前端開發中非常重要的一部分,其中基本選擇器是最基礎的一部分。以下是介紹基本選擇器的一些內容:
/* 僅對id為box的元素進行樣式修改 */ #box { color: red; } /* 僅對類名為text的元素進行樣式修改 */ .text { font-size: 16px; } /* 僅對元素類型為div的元素進行樣式修改 */ div { background-color: blue; } /* 僅對有href屬性的a標簽進行樣式修改 */ a[href*="google"] { text-decoration: none; }
以上是常見的基本選擇器,分別對應id選擇器、類選擇器、元素選擇器和屬性選擇器。
其中id選擇器只能用于一個元素,因為id在頁面中必須是唯一的。類選擇器可以作用于多個元素,但需要在HTML中添加相同的class屬性。元素選擇器可以作用于某種類型的元素,如div、p、a等。屬性選擇器可以根據元素的屬性進行選擇,如上例中根據href屬性選擇帶有Google鏈接的a標簽。
選擇器可以通過組合使用實現更精確的樣式修改,例如:
/* 僅對id為box的元素下的p標簽進行樣式修改 */ #box p { font-weight: bold; } /* 同時滿足類名為text且父元素為div的元素進行樣式修改 */ div .text { color: green; } /* 僅對類名為text的p標簽進行樣式修改 */ p.text { font-style: italic; }
以上示例分別使用了后代選擇器、后代選擇器和類選擇器的組合、元素選擇器和類選擇器的組合等方式實現樣式修改。
在實際應用中,基本選擇器是最常用的選擇器,熟練掌握基本選擇器可以大大提高開發效率。
下一篇css樣式表兼容