日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 前端技术 > CSS >内容正文

CSS

实操代码带你理解CSS中的常用选择器（你值得掌握！）

發(fā)布時(shí)間：2025/3/15 CSS 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 实操代码带你理解CSS中的常用选择器（你值得掌握！） 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在CSS中，我們要給一個(gè)元素定義樣式，首先得把這個(gè)元素選出來，我在網(wǎng)上看了很多文章，再結(jié)合老師所講的精華部分將平時(shí)比較常用的選擇器整理出來分享給大家，哈哈哈一起學(xué)習(xí)一起進(jìn)步！

https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關(guān)注！
歡迎關(guān)注微信公眾號：寶藏女孩的成長日記
如有轉(zhuǎn)載，請注明出處（如不注明，盜者必究）

目錄

    • 通配符選擇器
    • ID選擇器
    • 類選擇器
    • 標(biāo)簽選擇器
    • 后代選擇器
    • 子代選擇器
    • 組合選擇器
    • 偽類選擇器（重點(diǎn)）
    • 相鄰兄弟選擇器
      • 相鄰選擇器
      • 兄弟選擇器
    • 屬性選擇器

通配符選擇器

（*）
表示選擇所有的元素。

*{margin: 0;padding: 0;}/*設(shè)置所有的HTML標(biāo)簽的外邊距和內(nèi)邊距為0*/

ID選擇器

(#ID)
給元素添加一個(gè)id屬性，在樣式表中用一個(gè)#就可以把元素選擇出來。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{height: 50px;width: 100px;background-color: #FFFF00;}</style></head><body><div id="box1">I am box1</div></body> </html>

類選擇器

（.className）
給需要設(shè)置樣式的一類元素添加class屬性，然后通過一個(gè) .aa 這種方式就可以選擇到一類元素

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">.aa{color: #FFFFFF;background-color: blue;height: 200px;width: 200px;}</style></head><body><div class="aa">I am one</div><div class="aa">I am two</div><div class="aa">I am three</div></body> </html>

標(biāo)簽選擇器

直接使用標(biāo)簽的名稱來選擇。

<!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>

運(yùn)行結(jié)果

hahaha…可自行下載喜歡的圖片玩玩

后代選擇器

(父元素 子元素)
選擇一個(gè)元素包含的后代，可以是兒子，也可以是孫子。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 a{background-color: #FF7F50;}img{width: 350px;height: 300px;}</style></head><body><div id="box1"><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 don't have any decorations because I'm not an a tag</span><img src="img/pig.jpg"/></body> </html>

運(yùn)行結(jié)果

子代選擇器

(>)
符號是> ,只選擇兒子，不選擇孫子及其后代。（注意這里和后代的區(qū)別）

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1>a{background-color: #FF7F50;}#box1>p{background-color: #FF7F50;}</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 don't have any decorations because I'm not a p and a tag</span></body> </html>

運(yùn)行結(jié)果

組合選擇器

用逗號把單個(gè)的選擇器隔開，就是這幾個(gè)選擇器選擇結(jié)果的并集。

<!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>

運(yùn)行結(jié)果

偽類選擇器（重點(diǎn)）

：

a:link{ /*未訪問狀態(tài)*/}a:visited{ /*已訪問狀態(tài)*/}a:hover{ /*鼠標(biāo)懸停狀態(tài)*/}a:active{ /*激活選定狀態(tài)（鼠標(biāo)點(diǎn)擊未釋放時(shí)）*/}

注意：這個(gè)順序是不能改變的
方便記憶：“LOVE HATE”

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">a:link{color: black;} a:visited{color: yellow;}a:hover{color: red;}a:active{color: green;}</style></head><body><a href="https://www.qq.com/">我是騰訊，點(diǎn)點(diǎn)我</a></body> </html>

有大佬提到before和after選擇器了，記得我們老師提到過這個(gè)一下
網(wǎng)上查了一下，https://www.cnblogs.com/wonyun/p/5807191.html
個(gè)人覺得這個(gè)很全，推薦一下，后續(xù)有時(shí)間會完善，盡量會描述得更加通俗易懂些哈哈哈

相鄰兄弟選擇器

相鄰選擇器

+
影響的是＋號后面的（相鄰）的一個(gè)

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">h2+p{color: red;}</style></head><body><div id="Jay"><h2>蘭亭序</h2><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p></div></body> </html>

兄弟選擇器

~
受影響的是兄弟們，而不是一個(gè)

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">h2~p{color: red;}</style></head><body><div id="Jay"><h2>蘭亭序</h2><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p></div></body> </html>

屬性選擇器

語法：標(biāo)簽名[屬性名]{規(guī)則}

<!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云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><p>蘭亭臨帖 行書如行bai云流水 月下門推 心細(xì)如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p><a href="https://baike.baidu.com/item/%E5%85%B0%E4%BA%AD%E5%BA%8F/2879867?fr=aladdin">蘭亭序，點(diǎn)我</a></div></body> </html>

這就是我整理的全部常用選擇器啦，如果對你有幫助，留下你寶貴的小手印哈哈哈，歡迎點(diǎn)贊+評論+關(guān)注！一起學(xué)習(xí)一起進(jìn)步。生活因?qū)W習(xí)而變得美麗！

總結(jié)

以上是生活随笔為你收集整理的实操代码带你理解CSS中的常用选择器（你值得掌握！）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。