欢迎光临新华电脑职业培训-现代电脑-新东方学校网站!
您现在所处的位置:福建百科 > 网页编程 >

泉州浮桥网页培训班的CSS选择器手册,非常好的资料-福建百科教育网-泉州新东方-网页编程

作者:福建百科教育  时间:2020-05-04   点击数:   收藏  分享到:
0

泉州浮桥网页培训班的CSS选择器手册,非常好的资料-福建百科教育网-泉州新东方


整理 
  泉州培训网--李延安老师:电话/微信: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。