溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS選擇器常見的有哪幾種，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
css中選擇器有：1、簡單選擇器；2、屬性選擇器；3、組合選擇器；4、偽類選擇器；5、偽元素選擇器；6、多重選擇器。
| 選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器，匹配任何元素 |
| E | 標簽選擇器，匹配所有使用E標簽的元素 |
| .info | class選擇器，匹配所有class屬性中包含info的元素 |
| #footer | id選擇器，匹配所有id屬性等于footer的元素 |
| 選擇器 | 含義 |
|---|---|
| [atrr] | 選擇包含 attr 屬性的所有元素，不論 attr 的值為何 |
| [attr=val] | [attr=val] 僅選擇 attr 屬性被賦值為 val 的所有元素 |
| 選擇器 | 含義 |
|---|---|
| A, B | 選中匹配 A 或/和 B 的元素 |
| A B | 選中匹配 B 且為匹配 A 的元素的后代元素(A B之間空格分開) |
| A > B | 選中匹配 B 且為匹配 A 的元素的直接子元素 |
| A + B | 選中匹配 B 且為匹配 A 的元素的下一相鄰元素 |
| A ~ B | 選中匹配 B 且為匹配 A 的元素的下 N 個相鄰元素 |
| 選擇器 | 含義 |
|---|---|
| a:link | 匹配所有未被點擊的鏈接 |
| a:visited | 匹配所有已被點擊的鏈接 |
| a:hover | 匹配鼠標懸停其上的a元素 |
| a:active | 匹配鼠標已經其上按下、還沒有釋放的a元素 |
| li:first-child | 匹配父元素的第一個子元素li |
| li:last-child | 匹配父元素的最后一個子元素li |
| li:nth-child(n) | 匹配父元素的第n個子元素li（odd奇數，even偶數） |
| 選擇器 | 含義 |
|---|---|
| E::before | 在E元素內創建一個子元素，插入生成的內容作為偽元素，放在最前面 |
| E::after | 在E元素內創建一個子元素，插入生成的內容作為偽元素，放在最后面 |
| E::selection | 應用于文檔中被用戶高亮的部分（比如使用鼠標選中的部分） |
| E::first-letter | 匹配E元素的第一個字母第一行的第一個字母 |
| E::first-line | 匹配E元素的第一行 |
在HTML中，我們有時會對同一個標簽賦予多個class名稱，如：
<p class="one two"></p>而在CSS里面則可能同時選擇多個class，像是：
.one .two{} /*兩個 class 中有空格*/ .one.two{} /*兩個 class 中沒有空格*/ .one, .two{} /*兩個 class 中出現逗號*/這三者
one.two{ }，.one .two{ }，或者是.one, .two{ }有何區別？
第一個的 one 和 two 中間包含空格，意思是指，我必須要是在 one 裡面的 two，才會被選擇到。
第二個的 one 和 two 中間沒有包含空格，表示某個區塊必須同時具有 one 和 two 的 class 時，才能被 CSS 所選擇到到。
第三個的 one 和 two 中間包含逗號，意思是指 class 中有 one 或 two，都會被編輯器所選擇到。
簡單來說，沒空格表示必須同時包含才會被選取；有空格表示后面的 class 被鑲嵌在前面的 class 中才會被選取；逗號則表示只要有其中一個 class 就會被選取到 。
關于“CSS選擇器常見的有哪幾種”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
