前面我們初步學習了CSS,對其有了基本的認識。下面我們來具體學習CSS中的選擇器。
目錄
選擇器的種類
1.基礎選擇器
(1)標簽選擇器
(2)類選擇器
(3)id選擇器
(4)通配符選擇器
2.復合選擇器
3.偽類選擇器
選擇器的種類
以下內容為CSS2標準中支持的選擇器。
1.基礎選擇器
基礎選擇器都是由單個選擇器構成的。包括:標簽選擇器、類選擇器、id選擇器和通配符選擇器。
(1)標簽選擇器
上一節文章我們修改了段落標簽p的樣式。而我們在CSS文件中書寫的選擇器就為標簽選擇器。它只會修改對應標簽的樣式,而不會修改其他標簽的樣式。
p {color:red;font-size:40px;
}
(2)類選擇器
類似于標簽選擇器,我們在標簽中添加一個class類屬性,類選擇器中修改的樣式會作用在帶指定類的標簽上。
類選擇器要在前面加一個 .
例如,我們用三個段落標簽,并給不同的類:
<body><p class="cat">貓</p><p class="dog">狗</p><p class="rabbit">兔</p><p class="bird">鳥</p>
</body>
在給出不同的類選擇器:
.cat {color:black;font-size:20px;
}.dog {color:darkgrey;font-size:30px;
}.rabbit {color: white;font-size:10px;
}.bird {color:green;font-size: 5px;
}
最后運行可以看到四個段落文字有不同的效果。
(3)id選擇器
同上,在標簽中添加id屬性,并類似地在CSS中使用id選擇器。id選擇器需要再前面加一個#;這里就省略了。
(4)通配符選擇器
選取*的定義,選擇所有的標簽。通配符選擇器在實際開發中用來針對頁面中所有的元素默認樣式進行消除,主要用來消除邊距。例如:
* {background-color: bisque;
}
這時我們運行會發現整個網站的背景都變為了我們修改的顏色。并且優先級更高。如果我們單獨修改某一段的標簽樣式,則無法修改成功。?
2.復合選擇器
復合選擇器其實就是多個基礎選擇器相互結合。具體實現我們就不再探討。
3.偽類選擇器
最后我們來學習一下偽類選擇器。它一般用來定義元素狀態,可以用于選擇處于特定**狀態**或滿足特定**條件**的元素,這些狀態無法通過常規選擇器直接定位。它們以冒號 `:` 開頭,附加在基礎選擇器之后。
下面列舉幾種常見用法:
1.:hover? 鼠標懸停時
a:hover { color: red; } /* 鼠標懸停時鏈接變紅 */
2.:active? 元素被激活(如單擊時)
button:active { background: blue; } /* 按鈕按下時背景變藍 */
3.:focus? 元素獲得焦點(如輸入框被選中)
input:focus { border-color: green; } /* 輸入框聚焦時邊框變綠 */
4.:link? 未訪問的鏈接
a:link { color: purple; }
5.:visited? 已訪問的鏈接
a:visited { color: gray; }