選擇器分組完箩,聲明分組
類選擇器可以結(jié)合使用,ID選擇器不行十绑,因為ID屬性不允許有以空格分隔的詞列表
img[alt]{}選擇img包含alt屬性的img元素
a[href="www.baidu.com"]{}
a[href="www.baidu.com"][title="w3c"]{}
ID選擇器和指定id屬性的選擇器不是一回事
h1#page-title和h1[id="page-title"]有差別
p[class~="warning"]{}根據(jù)部分屬性值選擇元素漱挎,等價于p.warning
[foo^="bar"]選擇foo屬性值以“bar”開頭的所有元素
[foo$="bar"]選擇foo屬性值以“bar”結(jié)尾的所有元素
[foo*="bar"]選擇foo屬性值中包含子串“bar”的所有元素
根據(jù)屬性值中子串選擇元素廉涕,foo是任何屬性都可以
*[lang |= "en" ]{}選擇lang屬性等于en或者以en開頭的所有元素
后代選擇器
h1 em{}
子選擇器(有些時候并不想選擇任意的后代元素典蝌,而是希望縮小范圍曙砂,只選擇另一個元素的子元素)
h1 > strong{}
選擇相鄰兄弟元素
h1 + p{} 同父且相鄰的兄弟
偽類和偽元素
鏈接偽類
:link 未訪問過 靜態(tài)
:visited 訪問過 靜態(tài)
:focus 表示當前擁有輸入焦點的元素 動態(tài)
:hover 鼠標指針停留在元素上 動態(tài)
:active 被用戶輸入激活的元素 動態(tài)
偽類的順序很重要
link-visited-focus-hover-active
:first-child 選擇父元素的第一個子元素 靜態(tài)
p:first-letter{}設(shè)置塊級元素首字母樣式
p:first-line{}設(shè)置元素中第一個文本行
h2:before{content:"|"}在每個h2元素前加一個|
h2:after{content:"|"}在每個h2元素后加一個|