常州建設(shè)工程質(zhì)量監(jiān)督網(wǎng)站鄭州seo代理外包
舉例形象讓你學(xué)會,不搞官方話
- css所有的選擇器
- 相鄰兄弟選擇器
- 后續(xù)兄弟選擇器
- 后代選擇器
- 子代選擇器
- 并集選擇器(多重選擇器)
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
- class選擇器(類選擇器)
- id選擇器
- *選擇器(通配符選擇器)
- 標(biāo)簽選擇器
- 組合選擇器
- css選擇器權(quán)重排名
css所有的選擇器
相鄰兄弟選擇器
以+分隔開前后選擇器
用于選擇與指定元素在同一層級且后一個相鄰元素的元素
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>#eg p+p {background-color: blue;}</style></head><body><div id="eg"><p>你好</p><div><p>吃了嗎</p><p>吃的啥</p><div>好吃不</div> <p>太美味啦</p></div></div></body>
</html>
這里面的#eg p+p表示:
id為eg的元素里,緊接著p元素的第一個p元素。符合這個條件的只有<p>吃的啥</p>
如果結(jié)構(gòu)是這樣:
<div id="eg"> <p>你好</p> <div><p>吃了嗎</p><p>吃的啥</p><p>1</p><p>2</p><p>3</p><div>好吃不</div><p>太美味啦</p> </div></div> ```
那么符合條件的就是
<p>吃的啥</p><p>1</p><p>2</p><p>3</p>
后續(xù)兄弟選擇器
以~分隔開前后選擇器
用于選擇與指定元素在同一層級且在它后面的所有相鄰元素
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>#eg p~p{background-color: blue;}</style></head><body><div id="eg"><p>你好</p><div><p>吃了嗎</p><p>吃的啥</p><div>好吃不</div><p>太美味啦</p><p>1</p><p>2</p><p>3</p></div></div></body>
</html>
這里面的#eg p~p表示:
id為eg的元素里,緊接著p元素的所有p元素。符合條件的:<p>吃的啥</p> <p>太美味啦</p><p>1</p><p>2</p><p>3</p> ```
后代選擇器
以 分隔開前后選擇器(空格)
#eg p{background-color: blue;}
這里的#eg p表示:
id為eg的元素里所有的p元素背景顏色為藍色,哪怕嵌套一百層p標(biāo)簽,也還是藍色。
你的兒子,你,你爸都是你爺爺?shù)暮蟠?#xff0c;所以你爺爺都可以管你們
子代選擇器
以>分隔開前后選擇器
#eg>p{background-color: blue;}
這里的#eg>p表示:
id為eg的元素里面的第一代所有p元素背景顏色為藍色
在這個選擇器里,關(guān)系是這樣的:
你爸爸是你爺爺?shù)膬鹤?#xff0c;所以你爺爺可以管你爸爸
你是你兒子的爸爸,所以你可以管你兒子
但是你爺爺管不了你,管不了你兒子,只能管鄰近的子代,也就是只能管你爸爸
并集選擇器(多重選擇器)
以,分隔開前后選擇器
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>p,span,#ad {background-color: blue;}</style></head><body><p>你好</p><div>我的朋友</div><span>你吃了嗎</span><span>柯南</span><div id='ad'>我的朋友</div></body>
</html>
這里的p,span,#ad表示:
所有的p標(biāo)簽和所有的span標(biāo)簽和id名字為ad的標(biāo)簽,背景顏色為藍色
屬性選擇器
根據(jù)元素的屬性值來選擇元素
<!DOCTYPE html>
<html><head><style>div[title~=add] {color: aqua;font-size: 2em;}</style></head><body><div title="add">張三</div><div title="aff add">李四</div><div title="haha">王五</div><div title="add">趙六</div></body>
</html>
這里的div[title~=add]表示:
所有div里滿足title屬性里有add的設(shè)置字體顏色為青色,大小為2em
如果是這樣
div[title=add] {color: aqua;font-size: 2em; } ’
則表示
所有div里滿足title屬性里只有add的設(shè)置字體顏色為青色,大小為2em
偽類選擇器
用來選取元素的特殊狀態(tài)
如:hover :active :visited :first-child :last-child
<!DOCTYPE html>
<html><head><style>div>p:nth-child(3):hover{color: aqua;font-size: 2em;}</style></head><body><div><p>張三</p><p>李四</p><p>王五</p><p>趙六</p></div></body>
</html>
這里的div>p:nth-child(3):hover表示:
div元素里的第三個p元素設(shè)置懸停效果,當(dāng)鼠標(biāo)懸停在這個元素上改變樣式
偽元素選擇器
用來選取元素的某個部分
如::before ::after
<!DOCTYPE html>
<html><head><style>p:nth-child(2)::before{content: '@';}p:nth-child(3)::after{content: '@';}</style></head><body><div><p>張三</p><p>李四</p><p>王五</p><p>趙六</p></div></body>
</html>
這里的
::before指的是給第二個p元素前面加@符號;
::after指的是給第三個p元素后面加@符號
content:‘添加的元素’ 這是固定語法
class選擇器(類選擇器)
用.來獲取元素
<!DOCTYPE html>
<html><head><style>.aaa{color: red;}</style></head><body><div><p class="aaa">張三</p><p class="aaa">李四</p><p>王五</p><p>趙六</p></div></body>
</html>
這里的.aaa表示所有名字為aaa的元素,改變其字體顏色為紅色
class選擇器也叫類選擇器,相當(dāng)于定義某些元素為一類,直接選取這一類元素
id選擇器
用#來獲取元素
<!DOCTYPE html>
<html><head><style>#aaa{color: red;}</style></head><body><div><p id="aaa">張三</p><p>李四</p><p>王五</p><p>趙六</p></div></body>
</html>
這里的#aaa表示名字為aaa的元素,改變其字體顏色為紅色
id選擇器的權(quán)重比類選擇器更高,這意味著如果一個元素同時有id和class屬性,并且這兩個屬性都有樣式規(guī)則,那么id選擇器的樣式規(guī)則將被應(yīng)用
*選擇器(通配符選擇器)
用*設(shè)置所有元素的樣式
*{color: red;}
*表示全部,上面代碼的意思是頁面中所有元素的字體顏色都為紅色
標(biāo)簽選擇器
用標(biāo)簽名字選擇元素
div{color: red;}
上面代碼表示的意思是頁面所有div元素的字體都為紅色
組合選擇器
為了應(yīng)對各種布局樣式,各種dom元素的復(fù)雜結(jié)構(gòu),就有了組合選擇器。
組合選擇器就是將各種基本選擇器通過一定規(guī)則連接起來變成一個復(fù)雜的多功能選擇器 基本的,單一的選擇器,相當(dāng)于你會不同的法術(shù)。
組合選擇器,相當(dāng)于你把所有法術(shù)有機結(jié)合,戰(zhàn)斗力更猛。組合選擇器除了用在css中,對于js的dom操作,網(wǎng)絡(luò)爬蟲的html解析時,都非常有用。
常規(guī)的css,就是把這些規(guī)則應(yīng)用到selector指定的元素上,組合選擇器可以實現(xiàn)很多比較高級的功能。
css選擇器權(quán)重排名
在CSS中,不同的選擇器有不同的權(quán)重,當(dāng)多個樣式規(guī)則應(yīng)用到同一個元素時,CSS會按照權(quán)重的高低來決定最終的樣式。
CSS選擇器權(quán)重的排名為:
- !important聲明:權(quán)重最高,通常不建議使用,因為它會破壞CSS的層疊性,可能會引起樣式?jīng)_突和難以維護的問題。
- 內(nèi)聯(lián)樣式:在HTML元素中直接定義樣式,也就是使用style屬性。它的權(quán)重高于其他選擇器,但不如!important聲明。
- ID選擇器:使用#符號定義,每個ID只能在文檔中出現(xiàn)一次。它的權(quán)重高于類選擇器和屬性選擇器。
- 類選擇器、偽類選擇器、屬性選擇器:它們的權(quán)重相等,都是一般選擇器。類選擇器使用.符號定義,屬性選擇器使用[]符號定義,偽類選擇器使用:符號定義。
- 元素選擇器,偽元素選擇器:它們的權(quán)重最低,都是基本選擇器。元素選擇器使用標(biāo)簽名定義,偽元素選擇器使用::符號定義。 需要注意的是,當(dāng)多個選擇器權(quán)重相同時,CSS會采用就近原則,選擇最后出現(xiàn)的樣式規(guī)則應(yīng)用到元素上。因此,在編寫CSS樣式時,需要注意選擇器的權(quán)重和規(guī)則的順序,以確保樣式的正確應(yīng)用。
這里要說明一下:
偽類選擇器的權(quán)重與類選擇器和屬性選擇器相等,都是一般選擇器。它們的權(quán)重比元素選擇器低,但比偽元素選擇器高
<!DOCTYPE html>
<html><head><style>#box{color: red;}#box{color: blue;}</style></head><body><div><p id="box">張三</p><p>李四</p><p>王五</p><p>趙六</p></div></body>
</html>
因為同一個元素,給設(shè)置了不同的樣式,都應(yīng)用選擇權(quán)重更高的樣式
如果是id和class選擇器選擇同一元素,則應(yīng)用id選擇器下的樣式
如果是id和id選擇器選擇同一元素,則應(yīng)用最后設(shè)置的樣式
如果在樣式末尾加了!important 則不管什么選擇器選擇了同一元素,都會被!important無視
上面的例子如果改成這樣:
#box{color: red !important;}#box{color: blue;}
那一定只會顯示紅色,這就是css選擇器的權(quán)重優(yōu)先級