CSS中的選擇器分為多種,每種選擇器都有各自的特點和用途。下面分別介紹。
元素選擇器
p { color: red; }
元素選擇器是CSS中最基本的選擇器,以HTML元素作為選擇目標。例如,上述代碼選擇了所有的p元素,設置它們的顏色為紅色。
類選擇器
.some-class { font-size: 16px; }
類選擇器以“.”開頭,用于選擇具有相同類名的元素。例如,上述代碼選擇了所有類名為“some-class”的元素,設置它們的字體大小為16px。
ID選擇器
#my-id { background-color: yellow; }
ID選擇器以“#”開頭,用于選擇具有相同ID名的元素。例如,上述代碼選擇了ID為“my-id”的元素,設置它們的背景顏色為黃色。
屬性選擇器
input[type="text"] { border: 1px solid black; }
屬性選擇器以“[ ]”包圍,并通過元素的屬性來選擇元素。例如,上述代碼選擇了所有type屬性為“text”的input元素,為它們設置了1px的黑色邊框。
偽類選擇器
a:hover { text-decoration: underline; }
偽類選擇器以“:”開頭,用于選擇元素的特定狀態。例如,上述代碼選擇所有鼠標滑過的a元素,并設置它們的下劃線文本裝飾。
偽元素選擇器
p::before { content: "- "; }
偽元素選擇器以“::”開頭,用于為元素的特定部分設置樣式。例如,上述代碼在p元素前添加了一個短橫線。注意,“::before”和“::after”偽元素只能用于設置元素的內容而不能選擇元素本身。
以上是CSS中常見的選擇器,它們的用途各不相同,我們可以根據實際需要選擇合適的選擇器來實現目標樣式。
上一篇css中選擇器為什么帶電
下一篇css中選擇器的作用是