css選擇器 看完再也不用擔心選擇器問題了

2021-10-02 06:15:59 字數 1795 閱讀 5367

1.萬用字元選擇器*

萬用字元選擇器用來匹配到所有的元素

一般用法:用來清除元素預設的內外邊距，使得樣式統一

*
2. 標籤選擇器

標籤選擇器就是用來匹配到相對應的html標籤

比如：選中所有標籤為p的元素，把其文字的樣式修改為粉色pink

p
3.類選擇器

選中類名為指定類名的所有元素

比如：選中類名為box的元素，將其背景色修改為pink

.box
4. id 選擇器

選中id名為指定id名的元素，其中idzhi3就和人的身份證號碼一樣，都是唯一的，不能重複

比如：選中id值為tags的元素，將其字型顏色修改為pink

1.包含選擇器

使用空格分隔元素名稱，選擇元素內部的元素（不論是子元素還是孫子元素）

比如：選擇div裡面所有p元素，將其裡面的字型設定為pink

div p
2.子選擇器

使用 > 分隔元素名稱，選擇元素內部的第一層元素（僅選擇子元素）

比如：選擇div裡面的第一層p元素（子元素），將其裡面的字型設定為pink

div >  p
3.相鄰選擇器

使用 + 分隔元素名稱，選擇第乙個元素之後緊跟的那乙個元素，兩者是並列的關係

比如：選擇div下面的第乙個p元素，將其字型顏色設定為pink

div + p
4.兄弟選擇器

使用 ~ 分隔元素名稱，選擇ele1之後的全部ele2,注意兩者是並列關係，並且擁有同乙個父元素，ele2不一定需要緊跟在ele1後面

比如：選擇div的兄弟元素p，並將其字型顏色設定為pink

div ~ p
1.選擇帶有指定屬性的選擇器[attr]

比如：選擇帶有name屬性的input框,將其背景色改為pink

input[name]
2.選擇帶有指定屬性和值的選擇器[type=value]

比如：選擇出所有type=radio的input框,將其背景色修改為pink

input[type=radio]
3.選擇屬性值中包含指定單詞的元素[type~=value]

比如：選擇出所有類名帶有yellow的div，並將其背景色修改為yellow

div[class~=yellow]
4.選擇屬性值中帶有指定值開頭的元素[type^=first]

比如：選擇出所有類名以first開頭的div，並將其背景色設定為pink

div[class^=first]
5.玄色屬性值中帶有

Css選擇器 層次選擇器（關係選擇器）

1.e f 匹配 e 元素下所有的子元素 f 後代選擇器 eg css.box a匹配 box 下所有的子元素 a 2.e f 匹配 e 元素下第一級子元素 f 子選擇器 eg css.box a匹配 box 下第一級子元素 a 3.e f 匹配 e 元素後面緊鄰的哪乙個 f 元素 有且僅有乙個 相...

css選擇器 CSS選擇器總結

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

CSS選擇器 復合選擇器

選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...