JAVA培訓學習筆記 CSS3選擇器

2021-08-09 05:07:59 字數 1729 閱讀 1931

多個選擇器共同包含的元素

語法:多個選擇器連續書寫,沒空間隔。

p.text

多個選擇所有匹配的元素

語法:多個選擇器連續書寫,用逗號進行分隔

#container p,span,em,strong

相鄰的兄弟,必須嚴格相鄰,不允許出現其他元素間隔

h1 + p

所有的同級兄弟 不要求嚴格相鄰

h1 ~ p

選擇指定元素裡的所有匹配後代元素

寫法:用空格進行間隔

div p

選擇指定元素後的所有直接子代

寫法:用 > 進行間隔

div > p

p[id^=j] 匹配所有屬性以***開頭的元素

p[id$=u] 匹配所有屬性以***結尾的元素

p[id*=d] 匹配屬性值包含***的元素

p[id=p1] 匹配所有屬性值等於***的元素

選中同級別中的第乙個元素 如果元素匹配則生效,否則,不生效

p:first-child

選擇同級別並且同型別的第乙個元素 只會查詢型別匹配元素中的第乙個

p:first-of-type

選擇同級別中的最後乙個元素 如果元素匹配則生效,否則,不生效

p:last-child

選擇同級別並且同型別的最後乙個元素 只會查詢型別匹配元素中的最後乙個

p:last-of-type

選中同級別中的第n個元素 如果元素匹配則生效,否則,不生效。

p:nth-child(4)

選擇同級別並且同型別的第n個元素 只會查詢型別匹配元素中的第n個

p:nth-of-type(3)

選中同級別中的倒數第n個元素 如果元素匹配則生效,否則,不生效。

p:nth-last-child(2)

選擇同級別並且同型別的倒數第n個元素 只會查詢型別匹配元素中的第倒數第n個

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

選中同級別中的只有乙個的元素 如果元素匹配則生效,否則,不生效。

p:only-child

選擇同級別並且同型別的只有乙個的元素

p:only-of-type

凡是屬性值為布林型別的 如果想生效 它的取值可以有以下幾種

true

屬性值等於屬性名

直接給空字串

只寫屬性名

如果不想生效,不寫就可以!!

/*被禁用的元素*/

input:disabled

/*可以操縱的元素*/

input:enabled

/*讓所有被選擇啟用的元素 後面緊跟的label元素變色*/

input:checked + label

not偽類用來取反

option:not(:checked)

查詢表單中所有不包含name的元素

input:not([name])

target偽類用來操作所有被指定為錨點的元素

所有的元素都可以用來定義錨點 錨點的指定可以通過兩個屬性 name和id

name用的比較少,有些瀏覽器不支援通過name來指定錨點 只支援id

比較通用的方法是同時定義name和id 只需要將name和id的屬性值定為乙個即可

返回頂部

操作乙個段落的首個字元

p::first-letter

操作乙個段落的首行

p:first-line

css3學習筆記

1.為什麼分許多模組進行管理?為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一,class屬性本身沒有語義,褚翠是用來為css樣式服務的,屬於多餘屬性。第二,使用屬性的話,並沒有把樣式與元素繫結起來,針對同乙個class屬性文字框,下拉框,按鈕都可使用。這樣很...

CSS3學習筆記

一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...

css3學習筆記

1,transition是過度效果,一般是和hover一起用,transition的屬性有height,width常用屬性,在hover裡面就是會覆蓋原來的屬性,屬性由逗號間隔,各個屬性之間沒有先後關係,webkit transition width 2s ease in,height 2s,web...