CSS 选择器参考手册 下载本文

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—