個人總結的CSS常用 有用選擇器

2021-09-29 09:29:09 字數 1520 閱讀 3845

.class

選中所有類名為class的元素

#idname

選中所有id為idname的元素

* 萬用字元

選擇所有元素

element

選擇所有element元素 例如: p

element1, element2

選擇所有element1元素與element2元素

element1 > element2

選擇所有父級元素為element1的element2元素

element1 + element2

選擇所有緊接著element1元素的element2元素

[attribute]

選擇所有帶有attribute屬性元素

[attribute=value]

選擇所有使用target="value"的元素

[attribute~=value] [title~=flower]

選擇標題屬性包含單詞"flower"的所有元素

a:link

選擇所有未訪問鏈結

a:visited

選擇所有已訪問鏈結

a:hover

選擇滑鼠在鏈結上面時

a:active

選擇活動鏈結

input:focus

選擇具有焦點的輸入框

p:first-letter

選擇p元素的第乙個字母

p:first-line

選擇p元素的第一行

p:first-child

指定只有當p元素是其父級的第乙個子級的樣式。

== 只有p為第乙個子元素才能被選中 ==

p:last-child

指定只有當p元素是其父級的第乙個子級的樣式。

element1~element2 p~ul

選擇p元素之後的每乙個ul元素

p:first-of-type

選擇每個p元素是其父級的第乙個p元素

== 選擇的是第乙個p元素,p元素不需為結構上第乙個子元素 ==

p:last-of-type

選擇每個p元素是其父級的最後乙個p元素

p:only-of-type

選擇每個p元素是其父級的唯一p元素

p:nth-child(2) p:nth-last-child(2)

選擇每個p元素是其父級的第/最後第二個子元素

p:nth-of-type(2) p:nth-last-of-type(2)

選擇每個p元素是其父級的第/倒數第二個p元素

CSS常用選擇器總結

charset utf 8 title rel stylesheet href css index.css 標籤選擇器 所有該標籤 span id選擇器 w3c規定 id不允許重複 txt 類選擇器 需要同一種樣式屬性的可以分為一類 clazz 後代選擇器 html css clazz 分組選擇器 ...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

常用xpath選擇器和css選擇器總結

表示式說明 article 選取所有article元素的所有子節點 article 選取根元素article article a 選取所有屬於article的子元素的a元素 div 選取所有div子元素 不論出現在文件任何地方 article div 選取所有屬於article元素的後代的div元素...