实操代码带你理解CSS中的常用选择器（你值得掌握！）
生活随笔
收集整理的這篇文章主要介紹了
实操代码带你理解CSS中的常用选择器（你值得掌握！）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在CSS中，我們要給一個元素定義樣式，首先得把這個元素選出來，我在網上看了很多文章，再結合老師所講的精華部分將平時比較常用的選擇器整理出來分享給大家，哈哈哈一起學習一起進步！
https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）
目錄
- 通配符選擇器
- ID選擇器
- 類選擇器
- 標簽選擇器
- 后代選擇器
- 子代選擇器
- 組合選擇器
- 偽類選擇器（重點）
- 相鄰兄弟選擇器
- 相鄰選擇器
- 兄弟選擇器
- 屬性選擇器
通配符選擇器
（*）
表示選擇所有的元素。
ID選擇器
(#ID)
給元素添加一個id屬性，在樣式表中用一個#就可以把元素選擇出來。
類選擇器
（.className）
給需要設置樣式的一類元素添加class屬性，然后通過一個 .aa 這種方式就可以選擇到一類元素
標簽選擇器
直接使用標簽的名稱來選擇。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">p{color: coral;width: 200px;height: 60px;}</style></head><body><div id="box1"><img src="img/cat.jpg" alt="error" title="I am cat"/><p class="cat">I am a cat</p></div><span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p tag</span></body> </html>運行結果
hahaha…可自行下載喜歡的圖片玩玩
后代選擇器
(父元素 子元素)
選擇一個元素包含的后代，可以是兒子，也可以是孫子。
運行結果
子代選擇器
(>)
符號是> ,只選擇兒子，不選擇孫子及其后代。（注意這里和后代的區別）
運行結果
組合選擇器
用逗號把單個的選擇器隔開，就是這幾個選擇器選擇結果的并集。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">a,p,div,span{color: red;}</style></head><body><div id="box1"><img src="img/cat.jpg" alt="error" title="I am cat"/><p class="cat">I am a cat</p><a href="###">I am the son of box1</a><ol><a href="###">I am the grandson of the box1</a></ol></div><span class="pig">Hello, I am a pig. I have a style because I use the combination selector</span></body> </html>運行結果
偽類選擇器（重點）
：
a:link{ /*未訪問狀態*/}a:visited{ /*已訪問狀態*/}a:hover{ /*鼠標懸停狀態*/}a:active{ /*激活選定狀態（鼠標點擊未釋放時）*/}注意：這個順序是不能改變的
方便記憶：“LOVE HATE”
有大佬提到before和after選擇器了，記得我們老師提到過這個一下
網上查了一下，https://www.cnblogs.com/wonyun/p/5807191.html
個人覺得這個很全，推薦一下，后續有時間會完善，盡量會描述得更加通俗易懂些哈哈哈
相鄰兄弟選擇器
相鄰選擇器
+
影響的是＋號后面的（相鄰）的一個
兄弟選擇器
~
受影響的是兄弟們，而不是一個
屬性選擇器
語法：標簽名[屬性名]{規則}
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">a[href] {color:red;}</style></head><body><div id="Jay"><h2>蘭亭序</h2><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><a href="https://baike.baidu.com/item/%E5%85%B0%E4%BA%AD%E5%BA%8F/2879867?fr=aladdin">蘭亭序，點我</a></div></body> </html>這就是我整理的全部常用選擇器啦，如果對你有幫助，留下你寶貴的小手印哈哈哈，歡迎點贊+評論+關注！一起學習一起進步。生活因學習而變得美麗！
總結
以上是生活随笔為你收集整理的实操代码带你理解CSS中的常用选择器（你值得掌握！）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 洛谷 P1330 封锁阳光大学题解
- 下一篇： 【商业】10个经济学概念，让你看清复杂世