CSS中的那些選擇器

2021-10-07 10:57:44 字數 2673 閱讀 3745

在css中,選擇器是一種模式,用於選擇需要新增樣式的元素

.mydiv

"mydiv">星夜最帥啦

#myid

"myid">星夜最帥啦

p

星夜最帥啦

*

div *

div,p 

//選擇所有元素和所有元素

div p

//選擇元素內部的所有元素

div>p

//選擇父元素為元素的所有元素

div+p

//選擇緊接在元素之後的所有元素

[attribute] 用於選取帶有指定屬性的元素

eg:[target]

<=

> a[target]

//a與[target]之間不能加空格

"" target=

"_blank"

/a>

[attribute=value] 用於選取帶有指定屬性和值的元素

eg:

a[target=_blank]

//為target="_blank"的元素設定樣式

[attribute~

=value] 用於選取屬性值中包含指定詞彙的元素

eg:[title~

=flower]

//選擇title屬性包含單詞"flower"的元素,value值必須是整個單詞

[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素

eg:[

class

|=top]

="top"

>星夜最帥啦<

/div>

="top-text"

>星夜最帥啦!

!<

/div>

="toptext"

>星夜最帥啦!!!

<

/div>

<

!-- 前兩個樣式會改變,第三個樣式不會改變 --

>

注:value值必須是整個單詞,如class=「top」,或者後面跟著連字元,如class=「top-text」

:link 用於選取未被訪問的鏈結

:visited 用於選取已訪問的鏈結

:active 用於選擇活動鏈結

:hover 用於選擇滑鼠指標浮動在上面的元素,可用於所有元素,不只是鏈結

eg:

a:link

a:visited

a:active

a:hover

eg:

input:focus

//選擇獲得焦點的input元素

eg:

>

#fd:first-letter

style

>

"fd"

>

星夜最帥啦div

>

eg:

>

.p:first-line

style

>

class

="p"

>

星夜最帥啦

div>

eg:

p:first-child i

//選擇每個中的每個元素並設定其樣式,其中元素是其父元素的第乙個子元素

:before  選擇器在被選元素的內容**前面**插入內容,可以使用content屬性來指定要插入的內容

:after 選擇器在被選元素的內容**後面**插入內容,可以使用content屬性來指定要插入的內容

eg:p:before

p:after

p:lang(en)

注:該值必須是整個單詞,即可是單獨的,比如 lang=「en」,也可後跟連線符,比如 lang=「en-us」

element1和element2必須擁有同乙個父元素

eg:p~ul

星夜最帥啦

注:兩個元素必須擁有相同的父元素,但是element2不必直接緊隨element1

選擇器之間什麼時候加空格,什麼時候不加?

當多個選擇器表示在同乙個元素時,之間不需要加空格;當表示不同的元素時之間需要加空格。

eg:  

#div .dd

//「#div」代表的是元素,「.dd」代表的是元素,之間需要加空格 p#pp.dd

//"p","#pp",".dd"都表示元素,之間不需要加空格

"div" class="mydiv">

"pp" class="dd">星夜最帥啦/p>

CSS選擇器的那些事兒

css選擇器用於明確當前css樣式,尤其是內聯樣式表和外聯樣式表考慮當前css樣式修飾的是那乙個,或者那些html標籤 html標籤名作為選擇器名字,可以用於修飾所有的對應當前簽名的html標籤 針對html標籤id屬性進行選擇修飾,並且id屬性具有唯一性 針對html標籤class屬性進行選擇修飾...

css選擇器的那些型別

第一種 簡單選擇器 1.通用選擇器 2.元素選擇器 元素 3.id選擇器 id名 4.類選擇器 類名 5.群組選擇器 選擇器1,2,n 6.後代選擇器 選擇器1 選擇器2 7.子代選擇器 選擇器1 選擇器2 8.偽類選擇器 元素 link 未訪問時 元素 visited 訪問後 元素 hover 滑...

CSS中的選擇器

1.關係選擇器 a.後代選擇器特點 父元素 子元素,中間是空格什麼都不加 b.兒子選擇器的特點 父元素 子元素,中間是 號 c.相鄰選擇器特點 元素 元素,中間用 號,但是兩者要為同一級才行 d.兄弟選擇器特點 元素 元素,兄弟元素中間用 號,必須要兩個為同一級 2.屬性選擇器 a.格式是標籤名 屬...