整理
泉州培训网--李延安老师:电话/微信:15905099719
CSS3选择器 参考手册
1— 目录 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
2— 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
3— 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
4— CSS 选择器参考手册
我们会定期对 W3School 的 CSS 参考手册进行浏览器测试。
CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
选择器 例子
例子描述 .class.intro 选择 class="intro" 的所有元素。
#id#firstname 选择 id="firstname" 的所有元素。
** 选择所有元素。
elementp 选择所有 <p> 元素。
element,elementdiv,p 选择所有 <div> 元素和所有 <p> 元素。
element elementdiv p 选择 <div> 元素内部的所有 <p> 元素。
element>elementdiv>p 选择父元素为 <div> 元素的所有 <p> 元素。
element+elementdiv+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
[attribute][target] 选择带有 target 属性所有元素。
[attribute=value][target=_blank]
选择 target="_blank" 的所有元素。
[attribute~=value][title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value][lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
:linka:link 选择所有未被访问的链接。 :visiteda:visited 选择所有已被访问的链接。
: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> 元素的内容之前插入内容。
5— :afterp:after 在每个 <p> 元素的内容之后插入内容。
:lang(language)p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 e
lement1~element2p~ul 选择前面有 <p> 元素的每个 <ul> 元素。
[attribute^=value]a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value]a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
:first-of-typep:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-typep:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-typep:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-childp:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n)p:nth-child(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(n)p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
:last-childp:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:root:root 选择文档的根元素。 :emptyp:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。
:target#news:target 选择当前活动的 #news 元素。 :enabledinput:enabled 选择每个启用的 <input> 元素。
:disabledinput:disabled 选择每个禁用的 <input> 元素 :checkedinput:checked 选择每个被选中的 <input> 元素。
:not(selector):not(p) 选择非 <p> 元素的每个元素。
::selection::selection 选择被用户选取的元素部分。
CSS .class 选择器
CSS 选择器参考手册
21— 浏览器支持 所有主流浏览器都支持
:first-line 选择器。 定义和用法
:first-line 选择器用于选取指定选择器的首行。
注释:以下属性可与
:first-line 使用: 字体属性 颜色属性 背景属性 word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear
CSS :first-child 选择器 实例 选择属于其父元素的首个子元素的每个<p>元素,并为其设置样式: p:first-child { background-color:yellow; } 浏览器支持 所有主流浏览器都支持
:first-child 选择器。
42— ::-moz-selection { color:#ff0000; }
浏览器支持 IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
Firefox 支持替代的 ::-moz-selection。 定义和用法 ::selection 选择器匹配被用户选取的选取是部分。
只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。
泉州电脑设计培训班www.pxclass.com
李延安老师-电话/微信:15905099719