提高總結六 css選擇器2

2021-07-28 12:23:20 字數 1189 閱讀 3351

我沒有任何設定

我設定了lang=it

我設定了lang=it2

我前面沒有同級div

我前面有同級div

我前面是p元素

我沒有任何設定

我設定了lang=it

我設定了lang=it2

我設定了lang=2it

我設定了lang=2itm2

我設定了lang=hello world

我設定了lang=welcome-to-北京

我是第乙個p元素

我是第二個p元素

我是第三個p元素

我是span

我是唯一的乙個p元素

我是唯一的子元素

自行車汽車

男人 女人

姓名:郵件:

/*1,設定了lang屬性;2,屬性的值為it*/

div.c1 p:lang(it)

/*1,p和div必須是同級2,p的前面必須有div*/

div.c2 div~p

/*1,針對屬性值;2,^開頭,$結尾,*包含*/

div.c3 p[lang="it"]

div.c3 p[lang^="it"]

div.c3 p[lang$="it"]

div.c3 p[lang*="itm"]

/*1,針對單詞;2|單詞開頭且屬性為單個單詞,可以識別-鏈結,~包含單詞*/

div.c3 p[lang|="welcome"]

div.c3 p[lang~="world"]

/*1,同級別。2,first:第乙個,last:最後乙個*/

div.c4 p:first-of-type,p:last-of-type

/*只能有乙個型別元素,可以有其他型別*/

div.c4 p:only-of-type

/*只能有乙個型別元素,不可以有其他型別*/

div.c4 p:only-child

/*p裡面不能有文字*/

div.c5 p:empty:after

div.c6 input:enabled

div.c6 input:disabled

div.c6 input:checked

div.c7 input:invalid

css選擇器 CSS選擇器總結

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

CSS總結 CSS選擇器

css3選擇器最新部分,有人也稱這種選擇器為css3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...

CSS選擇器總結

通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...