CSS選擇器是用來選擇HTML文檔中的元素并應用樣式的模式。它們可以通過HTML元素的標簽名、類名、ID、屬性、甚至是元素在文檔中的位置來進行選擇。以下是CSS中的所有選擇器:
* { margin: 0; padding: 0; }
元素選擇器:是CSS的一種基本選擇器,通過選擇HTML元素的標簽名來進行選擇。例如:
p { color: red; }
類選擇器:選擇具有相同類名的HTML元素。它們以一個點"."為前綴,后面跟著類名。例如:
.blue-text { color: blue; }
ID選擇器:選擇具有指定ID的HTML元素。它們以一個井號"#"為前綴,后面跟著ID值。例如:
#main-content { width: 80%; }
屬性選擇器:選擇具有指定屬性的HTML元素。屬性選擇器可以使用"="、"~="、"|="和"^="等運算符。例如:
input[type="checkbox"] { margin-right: 5px; }
后代選擇器:選擇指定元素的后代元素。它們使用空格分隔,例如:
.container p { font-size: 18px; }
子元素選擇器:選擇指定元素的直接子元素。它們使用">"符號分隔,例如:
ul > li { list-style: none; }
相鄰兄弟選擇器:選擇指定元素后面緊跟的兄弟元素。它們使用"+"符號分隔,例如:
h1 + p { font-weight: bold; }
通用選擇器:匹配任何元素,它以"*"號表示:
* { box-sizing: border-box; }
偽類選擇器:是一種用于選擇特定元素狀態的選擇器。它們使用冒號":"符號,例如:
a:hover { text-decoration: underline; }
偽元素選擇器:是一種用于選擇文檔中特定位置或元素中的內容的選擇器。例如,選擇元素的第一個字母:
p::first-letter { font-size: 36px; }
CSS選擇器是CSS的重要組成部分,通過選擇器,我們可以更好地控制HTML元素的樣式。您可以使用上述選擇器來創建基于類,ID或其他條件的可重用樣式。