CSS選擇器是網頁設計中非常重要的一部分,它可以選擇并應用樣式到HTML文檔中的不同元素。下面是一份CSS選擇器手冊,您可以根據需要選擇適當的選擇器:
.element {...} /* 選擇所有class為“element”的元素 */ #element {...} /* 選擇id為“element”的元素 */ element {...} /* 選擇所有該元素類型的元素 */ element, element {...} /* 選擇所有指定的元素 */ element element {...} /* 選擇所有該元素后代的元素 */ element>element {...} /* 選擇所有該元素直接子元素 */ element+element {...} /* 選擇元素后面相鄰的兄弟元素 */ element~element {...} /* 選擇該元素后的所有兄弟元素 */
此外,還有一些偽類和偽元素選擇器:
:first-child {...} /* 選擇父元素中的第一個子元素 */ :last-child {...} /* 選擇父元素中的最后一個子元素 */ :nth-child(n) {...} /* 選擇父元素中的第n個子元素 */ :nth-last-child(n) {...} /* 選擇父元素中的倒數第n個子元素 */ :first-of-type {...} /* 選擇同一類型元素中的第一個 */ :last-of-type {...} /* 選擇同一類型元素中的最后一個 */ :nth-of-type(n) {...} /* 選擇同一類型元素中的第n個 */ :nth-last-of-type(n) {...}/* 選擇同一類型元素中的倒數第n個 */ :hover {...} /* 鼠標懸停時的樣式 */ :active {...} /* 鼠標按下時的樣式 */ :focus {...} /* 元素獲取焦點時的樣式 */ :before {...} /* 在元素之前插入內容 */ :after {...} /* 在元素之后插入內容 */
使用以上選擇器,您可以輕松地為網頁中不同的元素應用不同的樣式,從而打造獨特的網頁風格。