CSS選擇器由元素選擇器、ID選擇器、類選擇器、屬性選擇器、偽類選擇器、偽元素選擇器、通用選擇器、子元素選擇器、相鄰兄弟選擇器、通用兄弟選擇器等組成。

/* 元素選擇器 */
p {
color: blue;
}
/* ID選擇器 */
#my-id {
font-size: 16px;
}
/* 類選擇器 */
.my-class {
background-color: green;
}
/* 屬性選擇器 */
input[type="text"] {
width: 100%;
}
/* 偽類選擇器 */
a:hover {
color: red;
}
/* 偽元素選擇器 */
.container::before {
content: "";
}
/* 通用選擇器 */
* {
margin: 0;
padding: 0;
}
/* 子元素選擇器 */
ul >li {
list-style: none;
}
/* 相鄰兄弟選擇器 */
h2 + p {
margin-top: 20px;
}
/* 通用兄弟選擇器 */
div ~ p {
font-weight: bold;
}

每種選擇器都有其特殊的匹配規則，可以用于不同的布局和樣式設計，靈活運用選擇器可以讓CSS樣式更加精細和高效。