CSS3选择器
参考手册
赵祥德 整理
甘肃 酒泉 2016.09
目录
CSS 选择器参考手册 .................................... 4 CSS .class 选择器 ....................................... 5 CSS #id 选择器 ......................................... 6 CSS *选择器 ............................................ 7 CSS element 选择器 .................................... 8 CSS element,element 选择器 ............................ 8 CSS element element 选择器 ........................... 9 CSS element>element 选择器 ........................... 9 CSS element+element 选择器 .......................... 10 CSS element+element 选择器 .......................... 11 CSS [attribute] 选择器 ................................. 11 CSS [attribute=value] 选择器 .......................... 12 CSS [attribute~=value] 选择器 ......................... 12 CSS [attribute|=value] 选择器 .......................... 13 CSS :link 选择器 ....................................... 14 CSS :visited 选择器 .................................... 15
—1—
CSS :active 选择器 .................................... 16 CSS :hover 选择器 ..................................... 17 CSS :focus 选择器 ..................................... 19 CSS :first-letter 选择器 ................................ 19 CSS :first-line 选择器 .................................. 20 CSS :first-child 选择器 ................................ 21 CSS :before 选择器 ................................... 23 CSS :after 选择器 ..................................... 23 CSS :lang 选择器 ..................................... 24 CSS3 element1~element2 选择器 ..................... 25 CSS3 [attribute^=value] 选择器 ...................... 26 CSS3 [attribute$=value] 选择器 ....................... 26 CSS3 [attribute*=value] 选择器 ....................... 27 CSS3 :first-of-type 选择器 ............................ 28 CSS3 :last-of-type 选择器 ............................. 29 CSS3 :only-of-type 选择器 ............................ 29
—2—
CSS3 :only-child 选择器 ............................... 30 CSS3 :nth-child() 选择器 .............................. 30 CSS3 :nth-last-child() 选择器 .......................... 32 CSS3 :nth-of-type() 选择器 ........................... 33 CSS3 :nth-last-of-type() 选择器 ....................... 35 CSS3 :last-child 选择器 ............................... 36 CSS3 :root 选择器 .................................... 37 CSS3 :empty 选择器 .................................. 37 CSS3 :target 选择器 .................................. 38 CSS3 :enabled 选择器 ................................. 39 CSS3 :disabled 选择器 ................................ 39 CSS3 :checked 选择器 ................................ 40 CSS3 :not 选择器 ..................................... 41 CSS3 ::selection 选择器 ............................... 41
—3—
CSS 选择器参考手册
我们会定期对 W3School 的 CSS 参考手册进行浏览器测试。 CSS3 选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 选择器
.class#id*
例子
.intro #firstname *
例子描述
选择 class=\的所有元素。 选择 id=\的所有元素。 选择所有元素。 选择所有
元素。
选择所有
元素。 选择
元素。 选择父元素为
元素。 选择紧接在
元素。 选择带有 target 属性所有元素。 选择 target=\的所有元素。
选择 title 属性包含单词 \的所有元素。 选择 lang 属性值以 \开头的所有元素。 选择所有未被访问的链接。 选择所有已被访问的链接。 选择活动链接。
选择鼠标指针位于其上的链接。 选择获得焦点的 input 元素。 选择每个
元素的首字母。 选择每个
元素的首行。
选择属于父元素的第一个子元素的每个
元素。 在每个
元素的内容之前插入内容。
elementp
element,elementdiv,p
element elementelement>elementelement+element[attribute]
div p div>p div+p [target]
[attribute=value][target=_blank]
[attribute~=value][attribute|=value]:link
[title~=flower] [lang|=en] a:link
:visited:active:hover:focus
a:visited a:active a:hover input:focus
:first-letter:first-line
p:first-letter p:first-line
:first-child:before
p:first-child p:before
—4—