CSS选择器参考手册

赵祥德 整理甘肃 酒泉 2016.09CSS3 选择器参考手册1 目录CSS 选择器参考手册 .4CSS .class 选择器 .5CSS #id 选择器 .6CSS * 选择器 7CSS element 选择器 8CSS element,element 选择器 .8CSS element element 选择器 9CSS elementelement 选择器 .9CSS element+element 选择器 .10CSS element+element 选择器 .11CSS attribute 选择器 .11CSS attribute=value 选择器 12CSS attribute=value 选择器 .12CSS attribute|=value 选择器 .13CSS :link 选择器 .14CSS :visited 选择器 .152 CSS :active 选择器 16CSS :hover 选择器 18CSS :focus 选择器 .19CSS :first-letter 选择器 19CSS :first-line 选择器 .20CSS :first-child 选择器 .21CSS :before 选择器 23CSS :after 选择器 .24CSS :lang 选择器 25CSS3 element1element2 选择器 25CSS3 attribute=value 选择器 26CSS3 attribute$=value 选择器 27CSS3 attribute*=value 选择器 .27CSS3 :first-of-type 选择器 28CSS3 :last-of-type 选择器 .29CSS3 :only-of-type 选择器 .303 CSS3 :only-child 选择器 30CSS3 :nth-child() 选择器 .31CSS3 :nth-last-child() 选择器 32CSS3 :nth-of-type() 选择器 34CSS3 :nth-last-of-type() 选择器 .35CSS3 :last-child 选择器 37CSS3 :root 选择器 37CSS3 :empty 选择器 38CSS3 :target 选择器 38CSS3 :enabled 选择器 39CSS3 :disabled 选择器 .40CSS3 :checked 选择器 41CSS3 :not 选择器 41CSS3 :selection 选择器 .424 CSS 选择器参考手册我们会定期对 W3School 的 CSS 参考手册进行浏览器测试。CSS3 选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器 例子 例子描述.class .intro 选择 class=“intro“ 的所有元素。#id #firstname 选择 id=“firstname“ 的所有元素。* * 选择所有元素。element p 选择所有 元素。element,element div,p 选择所有 元素和所有 元素。element element div p 选择 元素内部的所有 元素。elementelement divp 选择父元素为 元素的所有 元素。element+element div+p 选择紧接在 元素之后的所有 元素。attribute target 选择带有 target 属性所有元素。attribute=value target=_blank 选择 target=“_blank“ 的所有元素。attribute=value title=flower 选择 title 属性包含单词 “flower“ 的所有元素。attribute|=value lang|=en 选择 lang 属性值以 “en“ 开头的所有元素。:link a:link 选择所有未被访问的链接。:visited a:visited 选择所有已被访问的链接。:active a:active 选择活动链接。:hover a:hover 选择鼠标指针位于其上的链接。:focus input:focus 选择获得焦点的 input 元素。:first-letter p:first-letter 选择每个 元素的首字母。:first-line p:first-line 选择每个 元素的首行。:first-child p:first-child 选择属于父元素的第一个子元素的每个 元素。:before p:before 在每个 元素的内容之前插入内容。5 :after p:after 在每个 元素的内容之后插入内容。:lang(language) p:lang(it) 选择带有以 “it“ 开头的 lang 属性值的每个 元素。element1element2 pul 选择前面有 元素的每个 元素。attribute=value asrc=“https“ 选择其 src 属性值以 “https“ 开头的每个 元素。attribute$=value asrc$=“.pdf“ 选择其 src 属性以 “.pdf“ 结尾的所有 元素。attribute*=value asrc*=“abc“ 选择其 src 属性中包含 “abc“ 子串的每个 元素。:first-of-type p:first-of-type 选择属于其父元素的首个 元素的每个 元素。:last-of-type p:last-of-type 选择属于其父元素的最后 元素的每个 元素。:only-of-type p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。:only-child p:only-child 选择属于其父元素的唯一子元素的每个 元素。:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 元素的每个 元素。:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。:last-child p:last-child 选择属于其父元素最后一个子元素每个 元素。:root :root 选择文档的根元素。:empty p:empty 选择没有子元素的每个 元素（包括文本节点）。:target #news:target 选择当前活动的 #news 元素。:enabled input:enabled 选择每个启用的 元素。:disabled input:disabled 选择每个禁用的 元素:checked input:checked 选择每个被选中的 元素。:not(selector) :not(p) 选择非 元素的每个元素。:selection :selection 选择被用户选取的元素部分。CSS .class 选择器6 CSS 选择器参考手册实例选择并设置 class=“intro“ 的元素的样式：.intro background-color:yellow;浏览器支持所有主流浏览器都支持 .class 选择器。定义和用法.class 选择器选取带有指定类 (class) 的元素。亲自试一试 - 实例为 class=“hometown“ 的所有 元素设置样式：p.hometown background-color:yellow;CSS #id 选择器实例7 为 id=“firstname“ 的元素设置样式：#firstname background-color:yellow;浏览器支持所有主流浏览器都支持 #id 选择器。定义和用法#id 选择器为带有指定 id 的元素设置样式。CSS * 选择器实例选择所有元素，并设置它们的背景色：* background-color:yellow;浏览器支持所有主流浏览器都支持 #id 选择器。定义和用法8 * 选择器选取所有元素。* 选择器也能选取另一个元素中的所有元素：实例选取 元素内部的所有元素：div * background-color:yellow;CSS element 选择器实例选择并设置所有 元素的样式：p background-color:yellow;浏览器支持所有主流浏览器都支持 element 选择器。定义和用法element 选择器用于指定元素名称的所有元素。CSS element,element 选择器实例9 选择并设置所有 样式和所有 元素的样式：h1,p background-color:yellow;浏览器支持所有主流浏览器都支持 element,element 选择器。定义和用法element,element 选择器用于用于同时选取多个元素。如需为不同的元素设置相同的样式，请用逗号来分隔每个元素。CSS element element 选择器实例选择并设置位于 元素内部的每个 元素的样式：div p background-color:yellow;浏览器支持所有主流浏览器都支持 element element 选择器。定义和用法element element 选择器用于选取元素内部的元素。CSS elementelement 选择器实例10 选取父元素是 元素的每个 元素，并设置其背景色：divp background-color:yellow;浏览器支持所有主流浏览器都支持 elementelement 选择器。注释：对于 IE8 及更早版本的浏览器中的 elementelement，必须声明 。定义和用法elementelement 选择器用于选取带有特定父元素的元素。注释：如果元素不是父元素的直接子元素，则不会被选择。CSS element+element 选择器实例选择 元素之后紧跟的每个 元素，并设置其背景色：div+p background-color:yellow;浏览器支持所有主流浏览器都支持 element+element 选择器。注释：对于 IE8 及更早版本的浏览器中的 element+element，必须声明 。定义和用法11 element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。CSS element+element 选择器实例选择 元素之后紧跟的每个 元素，并设置其背景色：div+p background-color:yellow;浏览器支持所有主流浏览器都支持 element+element 选择器。注释：对于 IE8 及更早版本的浏览器中的 element+element，必须声明 。定义和用法element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。CSS attribute 选择器实例为带有 target 属性的 元素设置样式：atarget background-color:yellow;浏览器支持12 所有主流浏览器都支持 attribute 选择器。注释：对于 IE8 及更早版本的浏览器中的 attribute，必须声明。定义和用法attribute 选择器用于选取带有指定属性的元素。CSS attribute=value 选择器实例为 target=“_blank“ 的 元素设置样式：atarget=_blank background-color:yellow;浏览器支持所有主流浏览器都支持 attribute=value 选择器。注释：对于 IE8 及更早版本的浏览器中的 attribute=value，必须声明 。定义和用法attribute=value 选择器用于选取带有指定属性和值的元素。CSS attribute=value 选择器实例选择 titile 属性包含单词 “flower“ 的元素，并设置其样式：title=flower background-color:yellow;13 浏览器支持所有主流浏览器都支持 attribute=value 选择器。注释：对于 IE8 及更早版本的浏览器中的 attribute=value，必须声明 。定义和用法attribute=value 选择器用于选取属性值中包含指定词汇的元素。CSS attribute|=value 选择器实例选择 lang 属性值以 “en“ 开头的元素，并设置其样式：lang|=en background-color:yellow;浏览器支持所有主流浏览器都支持 attribute|=value 选择器。注释：对于 IE8 及更早版本的浏览器中的 attribute|=value，必须声明 。定义和用法attribute|=value 选择器用于选取带有以指定值开头的属性值的元素。注释：该值必须是整个单词，比如 lang=“en“，或者后面跟着连字符，比如 lang=“en-us“。亲自试一试 - 实例14 选择其 class 属性值以 “top“ 开头的元素，并设置其样式：class|=top background-color:yellow;CSS :link 选择器实例选择未被访问的链接，并设置其样式：a:link background-color:yellow;浏览器支持所有主流浏览器都支持 :link 选择器。定义和用法:link 选择器用于选取未被访问的链接。注释：:link 选择器不会设置已经访问过的链接的样式。提示：请使用 :visited 选择器对指向已访问页面的链接设置样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式，:active 选择器用于设置点击链接时的样式。亲自试一试 - 实例15 例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;例子 2为链接设置不同的样式：a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :visited 选择器实例选择已访问的链接，并设置其样式：a:visited background-color:yellow;浏览器支持所有主流浏览器都支持 :visited 选择器。定义和用法:visited 选择器用于选取已被访问的链接。16 提示：请使用 :link 选择器对指向未被访问页面的链接设置样式, :hover选择器用于设置鼠标指针浮动到链接上时的样式，:active 选择器用于设置点击链接时的样式。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;例子 2为链接设置不同的样式：a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :active 选择器实例选择活动链接，并设置其样式：a:active background-color:yellow;浏览器支持17 所有主流浏览器都支持 :active 选择器。定义和用法:active 选择器用于选择活动链接。当您在一个链接上点击时，它就会成为活动的（激活的）。提示：请使用 :link 选择器对指向未被访问页面的链接设置样式，:visited 用于设置指向已访问页面的链接的样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;例子 2为链接设置不同的样式：a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :hover 选择器实例选择鼠标指针浮动在其上的元素，并设置其样式：18 a:hover background-color:yellow;浏览器支持所有主流浏览器都支持 :hover 选择器。定义和用法:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;例子 2为链接设置不同的样式：19 a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :focus 选择器实例选择获得焦点的输入字段，并设置其样式：input:focus background-color:yellow;浏览器支持所有主流浏览器都支持 :focus 选择器。注释：如果 :focus 用于 IE8 ，则必须声明 。定义和用法:focus 选择器用于选取获得焦点的元素。提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。CSS :first-letter 选择器实例选择每个 元素的首字母，并为其设置样式：p:first-letter font-size:200%;color:#8A2BE2;20 浏览器支持所有主流浏览器都支持 :first-letter 选择器。定义和用法:first-letter 选择器用于选取指定选择器的首字母。注释：以下属性可与 :first-letter 使用： 字体属性 颜色属性 背景属性 外边距属性 内边距属性 边框属性 text-decoration vertical-align（只有在 float 为 none 时） text-transform line-height float clearCSS :first-line 选择器实例选择每个 元素的首行，并为其设置样式：p:first-line background-color:yellow;21 浏览器支持所有主流浏览器都支持 :first-line 选择器。定义和用法:first-line 选择器用于选取指定选择器的首行。注释：以下属性可与 :first-line 使用： 字体属性 颜色属性 背景属性 word-spacing letter-spacing text-decoration vertical-align text-transform line-height clearCSS :first-child 选择器实例选择属于其父元素的首个子元素的每个 元素，并为其设置样式：p:first-child background-color:yellow;浏览器支持所有主流浏览器都支持 :first-child 选择器。22 注释：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明。定义和用法:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。亲自试一试 - 实例例子 1选择每个 中的每个 元素并设置其样式，其中的 元素是其父元素的第一个子元素：p:first-child ibackground:yellow;例子 2选择列表中的第一个 元素并设置其样式：li:first-childbackground:yellow;例子 3设置每个 的首个子元素，并设置其样式：ul:first-childbackground:yellow;23 CSS :before 选择器实例在每个 元素的内容之前插入新内容：p:before content:“台词：“;浏览器支持所有主流浏览器都支持 :before 选择器。注释：对于 IE8 及更早版本中的 :before，必须声明 。定义和用法:before 选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容。亲自试一试 - 实例在每个 元素前面插入内容，并设置所插入内容的样式：p:before content:“台词：-“;background-color:yellow;color:red;font-weight:bold;CSS :after 选择器24 实例在每个 元素的内容之后插入新内容：p:after content:“台词：“;浏览器支持所有主流浏览器都支持 :after 选择器。注释：对于 IE8 及更早版本中的 :after，必须声明 。定义和用法:after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。亲自试一试 - 实例在每个 元素后面插入内容，并设置所插入内容的样式：p:after content:“台词：-“;background-color:yellow;color:red;font-weight:bold;CSS :lang 选择器实例25 选择带有以 “en“ 开头的 lang 属性值的每个 元素，并设置其样式：p:lang(en) background:yellow;浏览器支持所有主流浏览器都支持 :lang 选择器。注释：对于 IE8 中的 :lang，必须声明 。定义和用法:lang 选择器用于选取带有以指定值开头的 lang 属性的元素。注释：该值必须是整个单词，即可是单独的，比如 lang=“en“，也可后跟连接符，比如 lang=“en-us“。CSS3 element1element2 选择器实例为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：pulbackground:#ff0000;浏览器支持所有主流浏览器都支持 element1element2 选择器。注释：对于 IE8 中的该选择器，必须声明 。定义和用法26 element1element2 选择器 element1 之后出现的所有 element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随element1。CSS3 attribute=value 选择器实例设置 class 属性值以 “test“ 开头的所有 div 元素的背景色：divclass=“test“background:#ffff00;浏览器支持所有主流浏览器都支持 attribute=value 选择器。注释：对于 IE8 及更早版本中的 attribute=value，必须声明。定义和用法attribute=value 选择器匹配属性值以指定值开头的每个元素。亲自试一试 - 实例设置 class 属性值以 “test“ 开头的所有元素的背景色：class=“test“backgr