CSS選擇器比較

2021-09-12 09:11:32 字數 3774 閱讀 5432

[attribute*=value]

[attribute$=value]

小結elements1 elements2 ，elements1>elements2， elements1 + elements2

elements1>elements2

elements1+elements2

小結

>


a[class^="a-icon"]


style


>


>


src=


"./pic.png"


class


="a-icon"


>


12a>


src=


"./pic.png"


class


="a-iconabc"


>


12a>


src=


"./pic.png"


class


="abca-icon"


>


12a>


src=


"./pic.png"


class


="a-asdicon"


>


12a>


div>
必須從頭開始匹配子串

>


a[class*="a-icon"]


style


>


>


src=


"./pic.png"


class


="a-icon"


>


12a>


src=


"./pic.png"


class


="a-iconabc"


>


12a>


src=


"./pic.png"


class


="abca-icon"


>


12a>


src=


"./pic.png"


class


="a-asdicon"


>


12a>


div>
匹配子串即可，不論從頭號開始匹配還是中途開始匹配

>


a[class$="a-icon"]


style


>


>


src=


"./pic.png"


class


="a-icon"


>


12a>


src=


"./pic.png"


class


="a-iconabc"


>


12a>


src=


"./pic.png"


class


="abca-icon"


>


12a>


src=


"./pic.png"


class


="a-asdicon"


>


12a>


div>
必須在結尾處匹配到子串

[attribute$=value] 末尾匹配

[attribute*=value] 任意位匹配

[attribute^=value] 起始匹配

>


div a


style


>


>


src=


"./pic.png"


class


="a-icon"


>


12a>


src=


"./pic.png"


class


="a-iconabc"


>


12a>


>


>


>


78a>


span


>


>


56a>


div>


src=


"./pic.png"


class


="abca-icon"


>


12a>


src=


"./pic.png"


class


="a-asdicon"


>


12a>


div>
div下的a標籤，不管距離div多少級，全部被選中

>


div>a


style


>


>


src=


"./pic.png"


class


="a-icon"


>


12a>


src=


"./pic.png"


class


="a-iconabc"


>


12a>


>


>


>


78a>


span


>


>


56a>


div>


src=


"./pic.png"


class


="abca-icon"


>


12a>


src=


"./pic.png"


class


="a-asdicon"


>


12a>


div>
div下的直接子元素a標籤才被選中，巢狀多級標籤時，對a的選中無效

>


div+a


style


>


>


src=


"./pic.png"


class


="a-icon"


>


12a>


src=


"./pic.png"


class


="a-iconabc"


>


12a>


>


>


>


78a>


span


>


>


56a>


div>


>


77h1


>


src=


"./pic.png"


class


="abca-icon"


>


12a>


>


div>


src=


"./pic.png"


class


="a-asdicon"


>


12a>


src=


"./pic.png"


class


="a-asdicon"


>


12a>


div>
緊跟div後的第乙個a標籤才被選中，緊跟div後卻不是a標籤的無效

div a （div下不論多少級均被選中）

div>a （div下直接子集才被選中）

div+a （緊跟div後的第乙個a標籤才被選中）

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 分組選擇器 選擇...

CSS選擇器 屬性選擇器

最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...