CSS選擇器是CSS的一個基本概念，用于在HTML或XML文檔中選擇要應用樣式的元素。CSS3中新增了很多有用的選擇器，本文將會對這些選擇器進行詳細介紹。

基本選擇器

基本選擇器是最常用的選擇器，可以通過元素名稱、class、id等屬性選擇元素。例如：

/* 通過元素名稱選擇 */
p{color:red;}
/* 通過class選擇 */
.title{font-size:24px;}
/* 通過id選擇 */
#header{background-color:#333;}

層次選擇器

層次選擇器可以通過元素之間的層次關系選擇元素，包括后代選擇器、子元素選擇器和相鄰兄弟選擇器。例如：

/* 后代選擇器 */
ul li{list-style:none;}
/* 子元素選擇器 */
ul>li{padding:5px;}
/* 相鄰兄弟選擇器 */
h1+p{font-style:italic;}

屬性選擇器

屬性選擇器可以通過元素的屬性來選擇元素。例如：

/* 屬性選擇器 */
input[type="text"]{width:200px;}
/* 存在屬性選擇器 */
a[href]{color:#00f;}
/* 前綴屬性選擇器 */
a[href^="https"]{font-weight:bold;}
/* 包含屬性選擇器 */
a[href*="google"]{text-decoration:none;}

偽類選擇器

偽類選擇器可以通過元素的狀態、位置等來選擇元素，包括鏈接狀態、動態狀態、目標元素等。例如：

/* 鏈接狀態 */
a:link{color:#f00;}
a:visited{color:#00f;}
/* 動態狀態 */
p:hover{background-color:#eee;}
/* 目標元素 */
:first-child{font-weight:bold;}

偽元素選擇器

偽元素選擇器可以在元素的某個位置插入內容。例如：

/* before偽元素 */
p::before{content:"前綴";color:#f00;}
/* after偽元素 */
p::after{content:"后綴";color:#00f;}

組合選擇器

組合選擇器可以將多個選擇器組合在一起，選擇符合條件的元素。例如：

/* 多個選擇器 */
h1,p{font-size:20px;}
/* 同時滿足多個條件 */
input[type="text"]+label{text-decoration:underline;}
/* 多個偽類選擇器 */
a:hover:visited{text-decoration:none;}

本文介紹了CSS3中的一些重要選擇器，這些選擇器可以幫助開發者更靈活地控制樣式和元素的顯示效果。