在CSS中,選擇器是非常重要的一部分。選擇器用于指定CSS樣式應該應用到哪些HTML元素上。CSS3中引入了許多新的選擇器,其中一些是非常基礎的選取器,本文將介紹其中一些最基本的選擇器。
/* 選擇元素名 */ p { color: red; }
元素名稱選擇器是最基礎的選擇器之一,它以HTML元素名稱為標識符。在上面的代碼中,我們對所有的<p>元素應用了樣式,文字顏色設置為紅色。
/* id選擇器 */ #header { background-color: yellow; }
ID選擇器用于選取指定id的HTML元素,并且id在整個HTML文檔中是唯一的。在上面的代碼中,我們選取了ID是“header”的元素,并設置其背景顏色為黃色。
/* 類選擇器 */ .highlight{ font-size: 20px; }
類選擇器用于選取所有指定類名的HTML元素。在上面的代碼中,我們選取了所有帶有“highlight”類名的元素,并將字體大小設置為20像素。
/* 后代選擇器 */ #container p { color: green; }
后代選擇器用于選取父元素中的所有指定后代元素。在上面的代碼中,我們選取了ID為“container”的父元素中的所有<p>元素,并將其字體顏色設置為綠色。
/* 子元素選擇器 */ #container >p { font-weight: bold; }
子元素選擇器指定只匹配父元素的即直接子元素。在上面的代碼中,我們僅選擇ID為“container”的父元素的子級<p>元素,并將其字體加粗。
以上是一些最基本的CSS3選擇器。通過掌握這些選擇器,您能夠更好地控制和設計網頁外觀。