详解CSS3挑选器的应用方式汇总

2021-01-20 06:56 jianzhan

1 通用性挑选器
1  *{}通配挑选符(CSS2):合适全部元素目标。
2  E种类(HTML)挑选符(CSS1):以文本文档語言目标种类DOM做为挑选符。
3  E#myid是id挑选符(CSS1):以唯1标志符id特性等于myid的E目标做为挑选符。
4  E.myclass是类class挑选符(CSS1):以class特性包括myclass的E目标做为挑选符。
5  E F:包括挑选符(CSS1):挑选全部被E元素包括的F元素。
CSS3新增的通用性挑选器:同级元素通用性挑选器:
1  通用性挑选器E~F{}:配对的是E元素以后的同级F元素配对E后面全部的F,EF同级。要是F在E的后面,E只是做为1个参照。E~F { background:#ff0; }
2  邻近(邻近)挑选器(css2):E+F{}:EF元素邻近,即挑选紧贴在E元素以后F元素。
3  包括(子)挑选器(css2):E>F{}:EF不能以隔代,E只能配对到下1个邻近辈F。
2 特性挑选器
1.E[att^="val"]:挑选具备att特性且特性值为以val开始的标识符串的E元素。
2.E[att$="val"]:挑选具备att特性且特性值为以val末尾的标识符串的E元素。
3.E[att*="val"]:挑选具备att特性且特性值为包括val的标识符串的E元素。
4.E[att|="val"] 挑选具备att特性且特性值为以val开始并用联接符"-"隔开的标识符串的E元素。
5.E[att] 挑选具备att特性的E元素。
6.E[att="val"]挑选具备att特性且特性值等于val的E元素。
7.E[att~="val"]挑选具备att特性且特性值为1用空格隔开的字词目录,在其中1个等于val的E元素。
注:4~7是CSS2独有的特性。 input最常见特性挑选器。
3  伪类挑选器
1 与客户页面相关的伪类:
(1)  E:enabled:配对表单中激活的元素,表单中可实际操作的元素。
(2)  E:disabled(常见):常见配对表单中禁用的元素 disabled="disabled"  。 eg:input[type="text"]:disabled { background:#ddd;} 只能够看不能实际操作。
(3)  E:checked:配对表单中被选定的radio(单选框)或checkbox(复选框)元素
是总体伪类(配对全部DOM文本文档):
(4)  ::selection 配对客户当今选定的元素,即设定目标被挑选时的色调。 ::selection。
2 构造性伪类
1) :root 配对文本文档的根元素,针对HTML文本文档,便是只能配对HTML根元素。
2) E:nth-child(n) 配对其当今元素
    E :nth-child(n):配对其父元素E的第n个子元素,第1个序号为1
    E F:nth-child(n):配对其父元素E的第n个F元素,第1个序号为1(貌似只对ul 能用)
3) E:nth-last-child(n):配对其父元素的倒数第n个子元素,第1个序号为1。
    E:last-child:配对父元素的最终1个子元素,等同于于:nth-last-child(1)。
4) E :nth-of-type(n):与:nth-child(n)功效相近,可是仅配对应用同种标识的元素。
5) E :nth-last-of-type(n):与:nth-last-child(n) 功效相近,可是仅配对应用同种标识的元素 。
6) E :first-of-type :配对父元素下应用同种标识的第1个子元素,等同于于:nth-of-type(1) 。
7) E :last-of-type :配对父元素下应用同种标识的最终1个子元素,等同于于:nth-last-of-type(1)。
8) E :only-child:配对父元素唯一的1个子元素。。
9) E:only-of-type:配对父元素下应用同种标识的唯11个子元素,等同于于:first-of-type,:last-of-type或 :nth-of-type(1),:nth-last-of-type(1) 。
10) E :empty 配对1个不包括任何子元素的元素,留意,文字连接点也被看做子元素.,空白连接点也被看作子连接点。
11) E:not(s) 配对不符当今挑选器的任何元素 :not(:nth-child(1))。
3
1) E:link{}:连接伪类挑选器,设定超连接a在未被浏览前的款式。
2) E:visited{}:连接伪类挑选器,设定超连接a在其连接详细地址已被浏览落伍的款式。
3) E:hover{}:客户实际操作伪类挑选器,设定元素在其电脑鼠标悬停时的款式。
4) E:active{}:客户实际操作伪类挑选器,设定元素在被客户激活(在电脑鼠标点一下与释放出来之间产生的恶性事件)时的款式。
5) E:focus{}客户实际操作伪类挑选器,设定元素在变成键入聚焦点(该元素的onfocus恶性事件产生)时的款式。
6) E:lang{}:伪类挑选器,配对应用独特語言的E元素。
CSS3 挑选器
在 CSS 中,挑选器是1种方式,用于挑选必须加上款式的元素。
"CSS" 列标示该特性是在哪儿个 CSS 版本号中界定的。(CSS1、CSS2 還是 CSS3。)

挑选器 事例 事例叙述 CSS .class .intro 挑选 class="intro" 的全部元素。 1 #id #firstname 挑选 id="firstname" 的全部元素。 1 * * 挑选全部元素。 2 element p 挑选全部 <p> 元素。 1 element,element div,p 挑选全部 <div> 元素和全部 <p> 元素。 1 element element div p 挑选 <div> 元素內部的全部 <p> 元素。 1 element>element div>p 挑选父元素为 <div> 元素的全部 <p> 元素。 2 element+element div+p 挑选紧接在 <div> 元素以后的全部 <p> 元素。 2 [attribute] [target] 挑选带有 target 特性全部元素。 2 [attribute=value] [target=_blank] 挑选 target="_blank" 的全部元素。 2 [attribute~=value] [title~=flower] 挑选 title 特性包括单词 "flower" 的全部元素。 2 [attribute|=value] [lang|=en] 挑选 lang 特性值以 "en" 开始的全部元素。 2 :link a:link 挑选全部未被浏览的连接。 1 :visited a:visited 挑选全部已被浏览的连接。 1 :active a:active 挑选主题活动连接。 1 :hover a:hover 挑选电脑鼠标指针坐落于其上的连接。 1 :focus input:focus 挑选得到聚焦点的 input 元素。 2 :first-letter p:first-letter 挑选每一个 <p> 元素的首字母。 1 :first-line p:first-line 挑选每一个 <p> 元素的首行。 1 :first-child p:first-child 挑选属于父元素的第1个子元素的每一个 <p> 元素。 2 :before p:before 在每一个 <p> 元素的內容以前插进內容。 2 :after p:after 在每一个 <p> 元素的內容以后插进內容。 2 :lang(language) p:lang(it) 挑选带有以 "it" 开始的 lang 特性值的每一个 <p> 元素。 2 element1~element2 p~ul 挑选前面有 <p> 元素的每一个 <ul> 元素。 3 [attribute^=value] a[src^="https"] 挑选其 src 特性值以 "https" 开始的每一个 <a> 元素。 3 [attribute$=value] a[src$=".pdf"] 挑选其 src 特性以 ".pdf" 末尾的全部 <a> 元素。 3 [attribute*=value] a[src*="abc"] 挑选其 src 特性中包括 "abc" 子串的每一个 <a> 元素。 3 :first-of-type p:first-of-type 挑选属于其父元素的首个 <p> 元素的每一个 <p> 元素。 3 :last-of-type p:last-of-type 挑选属于其父元素的最终 <p> 元素的每一个 <p> 元素。 3 :only-of-type p:only-of-type 挑选属于其父元素唯1的 <p> 元素的每一个 <p> 元素。 3 :only-child p:only-child 挑选属于其父元素的唯1子元素的每一个 <p> 元素。 3 :nth-child(n) p:nth-child(2) 挑选属于其父元素的第2个子元素的每一个 <p> 元素。 3 :nth-last-child(n) p:nth-last-child(2) 同上,从最终1个子元素刚开始计数。 3 :nth-of-type(n) p:nth-of-type(2) 挑选属于其父元素第2个 <p> 元素的每一个 <p> 元素。 3 :nth-last-of-type(n) p:nth-last-of-type(2) 同上,可是从最终1个子元素刚开始计数。 3 :last-child p:last-child 挑选属于其父元素最终1个子元素每一个 <p> 元素。 3 :root :root 挑选文本文档的根元素。 3 :empty p:empty 挑选沒有子元素的每一个 <p> 元素(包含文字连接点)。 3 :target #news:target 挑选当今主题活动的 #news 元素。 3 :enabled input:enabled 挑选每一个开启的 <input> 元素。 3 :disabled input:disabled 挑选每一个禁用的 <input> 元素 3 :checked input:checked 挑选每一个被选定的 <input> 元素。 3 :not(selector) :not(p) 挑选非 <p> 元素的每一个元素。 3 ::selection ::selection 挑选被客户选择的元素一部分。 3