CSS的偽類

CSS的偽類是指用於向選擇器添加特殊效果的關鍵字。偽類可以添加到選擇器的末尾，以添加對被選擇元素的特殊效果。偽類可以幫助我們輕鬆地更改HTML元素的樣式，而不需要去修改HTML本身。本文將從不同角度，介紹CSS的幾個常用偽類。

一、:hover 偽類

:hover偽類用於在滑鼠懸停在元素上時，更改元素的樣式。這是一個非常常用的偽類，可以通過它將任何元素的顏色，背景色，邊框等更改為想要的效果，增加網站的交互性和美觀度。

實現一

a:hover {
    color: red;
}

如上代碼所示，當滑鼠懸停在鏈接上時，文字顏色將變為紅色。

實現二

.button:hover {
    background-color: #000;
    color: #fff;
}

如上代碼所示，當滑鼠懸停在按鈕上時，按鈕的背景顏色會更改為黑色，文字顏色更改為白色。

二、:nth-child 偽類

:nth-child偽類允許我們選取元素的某個特定子元素。這可以用於選擇列表的特定項，或包含多個元素的容器中的特定項。

實現一

ul li:nth-child(2) {
    color: blue;
}

如上代碼所示，將選取ul元素下第二個li元素，並將其文字顏色改為藍色。

實現二

div:nth-child(odd) {
    background-color: #ccc;
}

如上代碼所示，將選取奇數編號的div元素，並將它們的背景顏色更改為灰色。

三、:checked 偽類

:checked偽類用於選擇已選中的表單元素，例如checkbox和radio。

實現一

input[type="checkbox"]:checked + label {
    text-decoration: line-through;
}

如上代碼所示，將選取已選中的checkbox元素，並將它後面的label標籤的文本加上刪除線。

實現二

input[type="radio"]:checked + label {
    background-color: #000;
    color: #fff;
}

如上代碼所示，將選取已選中的radio元素，並將它後面的label標籤的背景顏色更改為黑色，文字顏色更改為白色。

四、:not 偽類

:not偽類用於選擇不匹配指定選擇器的元素。

實現一

button:not([disabled]) {
    background-color: #fff;
    color: #000;
}

如上代碼所示，將選取所有未禁用的button元素，並將它們的背景顏色更改為白色，文字顏色更改為黑色。

實現二

li:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

如上代碼所示，將選取除了最後一個li元素外的所有li元素，並將它們的下邊框樣式更改為一像素的灰色實線。

五、:focus 偽類

:focus偽類用於選擇當前接收鍵盤輸入焦點的元素。

實現一

input:focus {
    border: 1px solid blue;
}

如上代碼所示，將選取處於焦點狀態的input元素，並將它邊框加上藍色的外框線。

實現二

textarea:focus {
    border: 2px solid green;
    outline: none;
}

如上代碼所示，將選取處於焦點狀態的textarea元素，並將它邊框加上二像素的綠色實線，同時去掉默認的外部邊框線。

結語

以上就是CSS的5個常用偽類的詳細介紹與示例。使用偽類能夠讓我們更好地控制和美化網頁元素，提高用戶體驗和視覺效果。