CSS選擇器是用于選擇HTML或XML文檔中特定元素的模式或規(guī)則，根據(jù)元素的類型、屬性、位置等條件來選擇一個或多個元素，然后將樣式規(guī)則應(yīng)用于這些選定的元素。以下是CSS選擇器的主要類型：
基礎(chǔ)選擇器：
復(fù)合選擇器：
關(guān)系選擇器：
屬性選擇器：根據(jù)元素的屬性及其值來選擇元素。
偽類選擇器：用于選擇HTML元素的特定狀態(tài)，如:hover、:active、:first-child等。
偽元素選擇器：用于選擇元素的特定部分，例如::before和::after，用于在元素的內(nèi)容前后插入內(nèi)容。
額外的選擇器：
這些選擇器可以根據(jù)需要組合使用，以更精確地定位到需要應(yīng)用樣式的HTML元素。隨著CSS版本的不斷更新，新的選擇器也不斷涌現(xiàn)，以支持更復(fù)雜的樣式需求。
當(dāng)然，以下是一些CSS選擇器的實(shí)例代碼，用于演示如何在實(shí)際應(yīng)用中使用它們：
- 基礎(chǔ)選擇器
元素選擇器：
css
p {
color: blue;
}
類選擇器：
css
.my-class {
font-size: 18px;
}
ID選擇器：
css
#my-id {
background-color: yellow;
}
- 復(fù)合選擇器
交集選擇器：
css
p.my-class {
text-align: center;
}
并集選擇器：
css
p, div, span {
margin: 10px;
}
- 關(guān)系選擇器
子代選擇器：
ul > li {
list-style-type: none;
}
后代選擇器：
css
div li {
color: green;
}
相鄰兄弟選擇器：
css
div + p {
border-top: 1px solid black;
}
普通兄弟選擇器：
css
div ~ p {
color: purple;
}
- 屬性選擇器
css
a[href] {
color: red;
}
input[type=“text”] {
border: 1px solid gray;
}
[disabled] {
opacity: 0.5;
}
- 偽類選擇器
css
a:hover {
text-decoration: underline;
}
li:first-child {
font-weight: bold;
}
input:focus {
outline: none;
border: 2px solid blue;
}
- 偽元素選擇器
css
p::before {
content: “Read this: “;
color: gray;
}
p::after {
content: “.”;
color: gray;
}
- 額外的選擇器
否定選擇器：
css
:not(.my-class) {
background-color: lightgray;
}
empty空選擇器：
css
p:empty {
display: none;
}
:target選擇器：
html
<a href=“#content”>Go to content</a>
<div id=“content”>
<p>This is the targeted content.</p>
</div>
css
#content:target {
background-color: lightblue;
}
:root根選擇器：
:root {
–main-color: blue;
}
body {
background-color: var(–main-color);
}
這些代碼示例只是CSS選擇器用法的一部分，實(shí)際使用中可以根據(jù)需要進(jìn)行組合和擴(kuò)展，以滿足更復(fù)雜的樣式需求。請注意，這些選擇器通常需要與HTML文檔一起使用，以便在實(shí)際頁面上看到效果。