1、css选择器参考手册2016.09css选择器参考手册目录CSS选择器参考手册4CSS ,0ss选择器5CSS #4选择器6CSS *选择器7CSS e/ement选择器8CSS element,element 8CSS element e/e/77677f 选择器9CSS elementelement 9CSS elements10CSS elements element 11CSS attribute 选择器11CSS attribute- va/ue 选择器12CSS attribute- - valued 选择器12CSS attribute value 选择器13CSS dink 选
2、择器14CSS :visited 选择器15CSS :active 选择器16CSS :hover 选择器17CSS :focus 选择器19CSS :first-letter 选择器19CSS :first-line 选择器20CSS :first-child 选择器21CSS :before 选择器23CSS :after 选择器23CSS dang 选择器24CSS3 elementlHement2 选释器25CSS3 attribute = valu 选择器26CSS3 attribute valud 选择器26CSS3 attribute = valu 选择器27CSS3 :firs
3、t-of-type 选择器28CSS3 :last-of-type 选择器29CSS3 :only-of-type 选择器29CSS3 :only-child 选择器30CSS3:nth-childO 选择器30CSS3 :nth-last-child()选择器32CSS3 :nth-of-typeO 选择器33CSS3 : nth -1 ast- of- ty peO选择器35CSS3 :last-child 选择器36CSS3 :root 选择器37CSS3 :empty 选择器37CSS3 :target 选择器38CSS3 :enabled 选择器39CSS3 :disabled 选择
4、器39CSS3 xhecked 选择器40CSS3 :not 选择器41CSS3 :selection 选择器41CSS选择器参考手册我们会定期对W3School的CSS参考手册进行浏览器测试。CSS3选择器在CSS中，选择器是一种模式，用于选择需要添加样式的元素。选择器例子例子描述 c/ass. intro选择class=intro的所有元素。*id#firstname选择id=firstname的所有元素。*选择所有元素。clementP选择所有p元素。element, ulemuntdiv, p选择所有div元素和所有p元素。ulement ulumuntdiv p选择div元素内部的所
5、有p元素。ulemunulumuntdivp选择父元素为div元素的所有p元素。ulemun什 ulementdiv+p选择紧接在div元素之后的所有p元素。二 attributetarget选择带有target属性所有元素。二 a t tribu f yalgtarget=_blank选择target=/x_blank/z的所有元素。attribute 二-title-flower选择title属性包含单词“flower的所有元素。attribute -Elang =en.选择lang属性值以en开头的所有元素。:linka：link选择所有未被访问的链接。:visiteda:visited
6、选择所有已被访问的链接。:activea：active选择活动处接。:hovera:hover选择鼠标指针位于其上的链接。:focusinput：focus选择获得焦点的input元素。:first-letterp:first-letter选择每个p元素的首字母。:first-linep：first-line选择每个p元素的首行。:first-childp：first-child选择属于父元素的第一个子元素的每个p元素。:beforep：before在每个p元素的内容之前插入内容。:afterp:after在每个p元素的内容之后插入内容。:lang(language)p:lang(it)选择带
7、有以“it开头的lang属性值的每个p元素。element 1 element2pul选择前面有p元素的每个ul元素。.attribute = val ueasrc=https”选择其src属性值以https”开头的每个a元素。at tribu fe$= val uuasrcS=，?. pdf选择其src属性以 pdf结尾的所有a元素。Lat tribu te*= val uejasrc*=abc选择其src属性中包含abc”子串的每个a元素。:first-of-typep:first-of-type选择属于其父元素的首个p元素的每个p元素。:last-of-typep:last-of-typ
8、e选择属于其父元素的最后p元素的每个p元素。:only-ofrypep:only-of-type选择属于其父元素唯一的p元素的每个p元素。：only-childp:only-child选择属于其父元素的唯一子元素的每个p元素。：nth-child (/i)p：nth-chiId(2)选择属于其父元素的第二个子元素的每个p元素。:nth-last-child (n)p:nth-last-child(2)同上，从最后一个子元素开始计数。：nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个p元素的每个p元素。:nth-last-of-type(p:nth-last-o
9、f-type(2)同上，但是从最后一个子元素开始计数。n):last-childp：last-child选择属于其父元素最后一个子元素每个p元素。:root:root选择文档的根元素。：emptyp:empty选择没有子元素的每个p元素（包括文木节点）。:target#news:target选择当前活动的#news元素。:enabledinput：enabled选择每个启用的input）元素。:disabledinput：disabled选择每个禁用的input）元素:checkedinput:checked选择每个被选中的。nput元素。：not(selectoi:not(p)选择非p元素的
10、每个元素。:selection:selection选择被用户选取的元素部分。CSS （治S5选择器css选择器参考手册实例选择并设置class=llintro,1的元素的样式:.intro background-color:yellow;浏览器支持所有主流浏览器都支持.class选择器。定义和用法.class选择器选取带有指定类(class)的元素。亲自试一试实例为class=hometown的所有p元素设置样式:p.hometown background-color:yellow;css 选择器实例为id=firstname”的元素设置样式:6/42css选择器参考手册， #firstnam
11、ebackground-color:yellow;， 999999 999999 999999 999999 999999 999999 浏览器支持所有主流浏览器都支持#id选择器。定义和用法#id选择器为带有指定id的元素设置样式。CSS *选择器实例选择所有元素，并设置它们的背景色：1 ! III*background-color:yellow;) 999999 999999 浏览器支持所有主流浏览器都支持#id选择器。定义和用法*选择器选取所有元素。8/42rec二七锭bq余次不nil*选择器也能选取另一个元素中的所有元素：实例选取vdiv元素内部的所有元素：， div * backgr
12、ound-color:yellow; 999999 999999 CSS e/ezneaZ选择器实例选择并设置所有p元素的样式：， 999999 P background-color:yellow; )， 999999 999999 999999 999999 浏览器支持所有主流浏览器都支持element选择器。定义和用法element选择器用于指定元素名称的所有元素。CSS el emen t7 el emen t实例选择并设置所有hl样式和所有vp元素的样式: 8/42css选择器参考手册 hlbackground-color:yellow; 999999 999999 999999 浏览
13、器支持所有主流浏览器都支持element,element选择器。定义和用法element,element选择器用于用于同时选取多个元素。如需为不同的元素设置相同的样式，请用逗号来分隔每个元素。CSS element e/eme”？选择器实例选择并设置位于div元素内部的每个vp元素的样式： div pbackground-color:yellow; 浏览器支持所有主流浏览器都支持element element选择器。定义和用法element element选择器用于选取元素内部的元素。CSS ele men t el emen t实例rec二七线9。余次干Jill.选取父元素是元素的每个元素，
14、并设置其背景色： divpbackground-color:yellow;， 999999 999999 999999 999999 999999 浏览器支持所有主流浏览器都支持elementelement选择器。注释：对于IE8及更早版本的浏览器中的elementelement,必须声 明 v!DOCTYPE定义和用法e/emectHeme*选择器用于选取带有特定父元素的元素。注释：如果元素不是父元素的直接子元素，则不会被选择。CSS elements element实例选择元素之后紧跟的每个vp元素，并设置其背景色：div+pbackground-color:yellow;， 999999
15、 999999 999999 浏览器支持所有主流浏览器都支持element+element选择器。注释：对于IE8及更早版本的浏览器中的dement+e/emect,必须声 明 v!DOCTYPE定义和用法css选择器参考手册elementelement选择器用于选取第一个指定的元素之后（不是内部） 紧跟的元素。CSS elements e/ement,实例选择vdiv元素之后紧跟的每个vp元素，并设置其背景色：div+pbackground-color:yellow;， 999999 99 999 9 999999 浏览器支持所有主流浏览器都支持elementelement选择器。注释：对于
16、IE8及更早版本的浏览器中的Hemeof+HemetK必须声 明 v!DOCTYPE。定义和用法elementelement选择器用于选取第一个指定的元素之后（不是内部） 紧跟的元素。CSS attribute 选择器实例为带有target属性的 己 元素设置样式：， 999999 atargetbackground-color:yellow;）浏览器支持css选择器参考手册所有主流浏览器都支持。由ibute选择器。注释：对于IE8及更早版本的浏览器中的attribute,必须声明 v!DOCTYPE。定义和用法attribute选择器用于选取带有指定属性的元素。CSS attribute=
17、valued 选择器实例为target=_blank的 己 元素设置样式：， ”atarget=_blankbackground-color:yellow;， 999999 999999 999999 999999 ,浏览器支持所有主流浏览器都支持日仕ribute=va/ue选择器。注释：对于IE8及更早版本的浏览器中的atEbute=value,必须声 明 v!DOCTYPE定义和用法attributevalue选择器用于选取带有指定属性和值的元素。CSS attribute- = value 选择器实例选择titile属性包含单词flower的元素，并设置其样式：， title=flowe
18、rbackground-color:yellow;css选择器参考手册， 999999 999999 999999 999999 999999 999999 999999 999999 999999 浏览器支持所有主流浏览器都支持attibute=value选择器。注释：对于IE8及更早版本的浏览器中的dttribute=value,必须声 明 v!DOCTYPE定义和用法attributervalue选择器用于选取属性值中包含指定词汇的元素。CSS attribute value 选择器实例选择lang属性值以nen开头的元素，并设置其样式:， lang|=enbackground-colo
19、r:yellow;, 浏览器支持所有主流浏览器都支持 回tribute =value选择器。注释：对于IE8及更早版本的浏览器中的口仕论。足|=依/,必须声 明 v!DOCTYPE定义和用法attribute = value选择器用于选取带有以指定值开头的属性值的元素。 注释：该值必须是整个单词，比如lang=en,或者后面跟着连字符，比 如 ldng=enus”。亲自试一试实例选择其class属性值以top开头的元素，并设置其样式:css选择器参考手册， class|=topbackground-color:yellow;， 999999 999999 999999 999999 99999
20、9 999999 CSS dink选择器实例选择未被访问的链接，并设置其样式:1 3a:linkbackground-color:yellow;)浏览器支持所有主流浏览器都支持:link选择器。定义和用法：link选择器用于选取未被访问的链接。注释：link选择器不会设置己经访问过的链接的样式。提示：请使用：visited选择器对指向已访问页面的链接设置样式，皿因选择器用于设置鼠标指针浮动到链接上时的样式，:active选 择器用于设置点击链接时的样式。亲自试一试实例例子1rec二七锭bq余次不nil选择未访问、己访问、悬浮和活动链接，并设置它们的样式:， a:linkcolor:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;， 999999 999999 例子2为链接设置不同的样式：， a.exl:hover,a.exl:active color:red;aex2:hover,aex2:active (font-size:150%;，
