多個選擇器共同包含的元素
語法:多個選擇器連續書寫,沒空間隔。
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...