【揭秘CSS偽類選擇器的奧秘】輕鬆掌握網頁樣式設計技巧

一、什麼是CSS偽類抉擇器？

CSS偽類抉擇器是一種富強的東西，它容許開辟者根據元素的狀況或地位來利用特定的款式，而無需修改HTML構造。偽類擴大年夜了CSS的抉擇器語法，使得網頁計劃愈加靜態跟交互友愛。

二、CSS偽類抉擇器的品種

1. 交相互關偽類

2.1 :hover偽類

:hover偽類是最常用的CSS偽類之一，用於在用戶將鼠標懸停在元素上時改變其款式。

button:hover {
    background-color: #007BFF;
    color: white;
}

2.2 :active偽類

:active偽類在用戶激活（比方點擊）元素時利用款式。

button:active {
    background-color: #0056b3;
}

2.3 :focus偽類

:focus偽類表示元素獲得核心時的狀況，晉升網頁的可拜訪性。

input:focus {
    border-color: #ffbf47;
}

2. 構造性偽類

2.1 :first-child跟:last-child

:first-child跟:last-child用於抉擇第一個或最後一個子元素。

p:first-child {
    font-weight: bold;
}

p:last-child {
    color: red;
}

2.2 :nth-child(n)

:nth-child(n)用於抉擇第n個子元素。

li:nth-child(3) {
    color: red;
}

2.3 :nth-of-type(n)

:nth-of-type(n)用於抉擇第n個特定範例的子元素。

p:nth-of-type(2) {
    font-style: italic;
}

2.4 :only-child

:only-child抉擇其父元素的唯一一個子元素。

div:only-child {
    border: 2px solid blue;
}

2.5 :only-of-type

:only-of-type抉擇一個元素是它的下級元素的唯一一個雷同範例的子元素。

p:only-of-type {
    font-weight: bold;
}

2.6 :not()

:not()表示否定抉擇器，即打消或許過濾掉落特定元素。

input:not([type="submit"]) {
    border: 1px solid red;
}

2.7 :unresolved

:unresolved偽類是一個絕對較新的不雅點，用於抉擇那些尚未剖析的元素。

img:unresolved {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

三、總結

CSS偽類抉擇器為網頁計劃師供給了豐富的款式計劃技能，經由過程公道應用這些偽類，可能輕鬆地實現靜態跟交互後果，晉升網頁的視覺後果跟用戶休會。