02day CSS選擇器

1、選擇器:

*選擇器(selector),會(huì)告訴瀏覽器:網(wǎng)頁(yè) 上的哪些元素需要設(shè)置什么樣的樣式。

*比如:p這個(gè)選擇器就表示選擇頁(yè)面中的所 有的p元素,在選擇器之后所設(shè)置的樣式會(huì) 應(yīng)用到所有的p元素上

元素選擇器:

*元素選擇器(標(biāo)簽選擇器),可以根據(jù)標(biāo) 簽的名字來(lái)從頁(yè)面中選取指定的元素。

*語(yǔ)法: 標(biāo)簽名 { }

*比如p則會(huì)選中頁(yè)面中的所有p標(biāo)簽,h1會(huì) 選中頁(yè)面中的所有h1標(biāo)簽。

2、類選擇器:

類選擇器,可以根據(jù)元素的class屬性值選取元素。

語(yǔ)法:

.className{}

比如.hello會(huì)選中頁(yè)面所有class屬性為hello的元素。

3、ID選擇器

ID選擇器,可以根據(jù)元素的id屬性值選取元素。

語(yǔ)法:#地{}

比如:#box會(huì)選中頁(yè)面中的id屬性值為box的元素,和class屬性的不同,id屬性是不能重復(fù)的。

4、復(fù)合選擇器

復(fù)合選擇器,可以同時(shí)使用多個(gè)選擇器,這樣可以先擇同時(shí)滿足多個(gè)選擇器的元素。

語(yǔ)法:選擇器,選擇器{}

例如:div.box1會(huì)選中頁(yè)面中具有box1這個(gè)class的div元素。


5、群組選擇器:

群組選擇器,可以同時(shí)使用多個(gè)選擇器,多個(gè)選擇器將同時(shí)應(yīng)用指定的樣式。

語(yǔ)法:選擇器1,選擇器2,選擇器3{}

比如p,hello,#box會(huì)同時(shí)選中頁(yè)面中p元素,class為hello的元素,id為box的元素。

6、通用選擇器:*{}


族譜

7、標(biāo)簽之間的關(guān)系:

祖先元素:直接或間接包含后代元素的元素。

后代元素:直接或間接被祖先元素包括的元素。

父親元素:直接包含子元素的元素。

子元素:直接被父元素包含的元素。

8、兄弟元素:擁有相同父元素的元素。

9、后代選擇器:后代選擇器可以根據(jù)標(biāo)簽的關(guān)系,為處在元素內(nèi)部的代元素設(shè)置樣式。

語(yǔ)法:祖先元素,后代元素,后代元素{}

比如:p strong會(huì)選中頁(yè)面中的所有中的p元素內(nèi)的strong元素。

10、給鏈接定義樣式:

正常連接:a:link

訪問(wèn)過(guò)的鏈接:a:visited

鼠標(biāo)還過(guò)的鏈接:a:hover

鼠標(biāo)點(diǎn)擊的鏈接:a:active

其他:

獲取焦點(diǎn):fcous

指定元素前:before

指定元素后:after

遠(yuǎn)中的元素::selection

11、給段落定義樣式:

首字母:first-letter

首行:first-line

12、自選擇器:父選擇器>子選擇器

其他的子元素選擇器

:first-child 選擇第一個(gè)子標(biāo)簽

:last-child選擇做后一個(gè)子標(biāo)簽

:not-child選擇指定的子元素

:first-of-type

:last-of-type

:nth-of-type這三者對(duì)應(yīng)不同的指定類型的子元素

13、兄弟選擇器:兄弟元素+兄弟元素{}查找后面一個(gè)兄弟元素

查找后面的所有兄弟元素. 兄弟元素~兄弟元素{}

否定偽元素:not(選擇器){}

比如p:not(.hello)表示選擇所有的p元素但 是class為hello的除外。

*********************************************************************

1題 plate(元素選擇器)

2題bento(元素選擇器)

3題#fancy(id選擇器)

4題plate apple(后代元素選擇器)

5題#fancy pickle(復(fù)合選擇器)

6題.small(類選擇器)

7題bento .small,plate .small(并集選擇器)

8題bento orange(后代元素選擇器)

9題plate,bento,plate(并集選擇器)

10題*(通配選擇器)

11題plate*(后代元素選擇器)

12題plate + apple(兄弟元素選擇器)

13題bento~pickle(兄弟元素選擇器)

14題plate > apple(子類元素選擇器)

15題orange:first-child(子元素選擇器)

16題:only-child(子元素選擇器)

17題.small:last-child(子元素選擇器)

18題plate:nth-child(3)(子元素選擇器)

19題:nth-last-child(4)(子元素選擇器)

20題apple:first-of-type(子元素選擇器)

21題plate:nth-of-type(even)(子元素選擇器)

22題plate:nth-of-type(2n+3)(子元素選擇器)

23題apple:only-of-type(子元素選擇器)

24題.small:nth-child(even)(子元素選擇器)

25題bento:empty(子元素選擇器)

26題apple:not(.small)(not選擇器)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 選擇器 元素選擇器 作用:通過(guò)元素選擇器可以選擇頁(yè)面中的所有指定元素 語(yǔ)法:標(biāo)簽名{} id選擇器 作用:通過(guò)元素...
    2simple閱讀 735評(píng)論 0 0
  • 其實(shí)平時(shí)用得多的選擇器無(wú)非也就是那么幾個(gè),時(shí)間久了,許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器,今...
    盛夏晚清風(fēng)閱讀 1,956評(píng)論 0 5
  • CSS選擇器結(jié)構(gòu)邏輯圖 接下來(lái)按照結(jié)構(gòu)邏輯圖具體講解各個(gè)選擇器的作用及用法; 基本選擇器 基本選擇器主要有以下5類...
    FoolishFlyFox閱讀 658評(píng)論 0 8
  • 1.class 和 id 的使用場(chǎng)景? class:類選擇器,一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上,...
    饑人谷_兔子君閱讀 1,278評(píng)論 0 0
  • 1.class 和 id 的使用場(chǎng)景? 兩者都能選取DOM節(jié)點(diǎn)并給DOM節(jié)點(diǎn)添加樣式,但是W3C標(biāo)準(zhǔn)里規(guī)定頁(yè)面中只...
    饑人谷_米彌輪閱讀 508評(píng)論 0 1

友情鏈接更多精彩內(nèi)容