CSS3之选择器
Posted 前端技术博文
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3之选择器相关的知识，希望对你有一定的参考价值。
一、基本选择器
基本选择器是css中使用最频繁、最基础，也是css中最早定义的选择器。
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配选择器 | 选择文档中所有的html元素 |
| E | 元素选择器 | 选择指定类型的HTML元素 |
| #id | ID选择器 | 选择指定ID的元素 |
| .class | 类选择器 | 选择指定属性值为“class”的任意类型的任意多个元素 |
| select1,selectN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
通配符选择器
通配符选择器用来选择所有元素，也可以选择某个元素下的所有元素。
例如：类名为demo下的所有元素.demo*{background-color:red;}
二、层次选择器
层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E >F | 子选择器 | 选择匹配的F元素，且匹配的F元素是所匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素 后面 |
| E~F | 通用兄弟选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
E+F和E~F的区别是E和F都是同辈元素，E+F选择的是E元素后面的一个兄弟元素，E~F选择的是E元素后面的所有兄弟元素。
三、动态伪类选择器
css3的伪类选择器可以分成六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器和否定伪类选择器。
动态伪类并不存在于HTML中，只有当用户和网站交互时才能体现出来，动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种是用户行为伪类。
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:link | 链接伪类选择器 | 选择匹配的E元素，且匹配元素被定义的超链接并未被访问过 |
| E:visited | 链接伪类选择器 | 选择匹配的E元素，且匹配元素被定义的超链接被访问过 |
| E:active | 用户行为伪类选择器 | 选择匹配的E元素，且匹配选择被激活 |
| E:hover | 用户行为伪类选择器 | 选择匹配的E元素，且用户鼠标停留在E元素上 |
| E:focus | 用户行为伪类选择器 | 选择匹配的E元素，且匹配的元素获得焦点 |
锚点伪类的设置须遵守的规则："link-visited-hover-active"。
四、目标伪类选择器
目标伪类选择器":target"用来匹配文档的URI中某个标识符的目标元素。URI中的标识符通常会包含一个井号（#），后面带有一个标识符名称，例如"#contact"。在Web页面中，一些URL拥有片段标识符，由一个井号后跟一个锚点或元素ID组合而成，可以链接到页面的某个特定元素。"target"伪类选择器选取链接的目标元素，然后供定义样式。
| 选择器 | 功能描述 |
|---|---|
| E:target | 选择匹配E的所有元素，且匹配元素被相关URL指向 |
注意：目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。
示例代码：
css部分
1/* Add some spacing */
2ul, div {
3 margin-bottom: 10px;
4}
5
6/* Default block styles */
7div {
8 padding: 10px;
9 border: 1px solid #eaeaea;
10 border-radius: 5px;
11}
12
13/* Change its appearance when it's matched */
14div:target {
15 border-color: #9c9c9c;
16 box-shadow: 0 0 4px #9c9c9c;
17}
html部分
1<ul>
2 <li><a href="#id1">Block 1</a></li>
3 <li><a href="#id2">Block 2</a></li>
4 <li><a href="#id3">Block 3</a></li>
5 <li><a href="#id4">Block 4</a></li>
6</ul>
7
8<div id="id1">
9 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. </p>
10</div>
11
12<div id="id2">
13 <p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
14</div>
15
16<div id="id3">
17 <p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
18</div>
19
20<div id="id4">
21 <p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas. </p>
22</div>
五、语言伪类选择器
语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从css指定。
为文档指定语言有两种方法：
（1）如果使用html5，可以直接设置文档的语言
1<!DOCTYPE HTML>
2<html lang="en-US">
（2）手工在文档中指定lang属性，并设置对应的语言值
<body lang="fr">
语法：
E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。
示例：
1/*英文（en-US)版本的引文q效果*/
2:lang(en){
3 quotes:'"' '"';
4}
5:lang(en) q{
6 background:red;
7}
8/*法文（fr)版本的q效果*/
9:lang(fr){
10quotes: '<<' '>>';
11}
12:lang(fr) q{
13 background:green;
14}
也可以通过这种方法为不同语言版本的网站相关元素设置不同的样式，例如改变网站页面的字号、设置不同的背景图片等。
六、UI元素状态伪类选择器
UI元素状态伪类选择器主要用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观，使表达页面更具个性与品味，使用户操作页面表单更便利和简单。
UI元素状态伪类选择器语法
UI元素的状态一般包括启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:checked | 选中状态 | 匹配选中的复选按钮或单选按钮表单元素 |
| E:enabled | 启用状态 | 匹配所有启用的表单元素 |
| E:disabled | 禁用状态 | 匹配所有禁用的表单元素 |
示例代码：
1/*表单元素获得焦点效果*/
2textarea:focus,
3input[type="text"]:focus,
4input[type="password"]:focus{
5 border-color:rgba(82,168,236,0.8);
6 outline: 0;
7 outline:thin dotted 9;
8 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),
9 0 0 8px rgba(82,168,236,0.6);
10}
11/*禁用的input,select,textarea表单元素效果*/
12input[disabled], /*等效于input：disabled*/
13select[disabled], /*等效于select：disabled*/
14textarea[disabled] /*等效于textarea:disabled*/
15{
16 cursor:not-allowed;
17 background-color:#eee;
18 border-color:#ddd;
19}
20/*禁用的单选按钮和复选按钮效果*/
21input[type="radio"][disabled], /*等效于input[type="radio"]:disabled*/
22input[type="checbox"][disabled], /*等效于input[type="checkbox"]:disabled*/
23{
24 background-color:transparent;
25}
七、结构伪类选择器
结构伪类都是基于HTML文档结构树的，也称作文档对象模型（DOM）。文档树是HTML页面的层级结构，由元素、属性和文本组成。
结构伪类选择器语法
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E。与nth-child(1)等同 |
| E:last-child | 作为父元素的最后一个子元素的元素E。与nth-last-child(1)等同 |
| E:root | 选择匹配元素E所有文档的根元素。在HTML中，根元素始终是html |
| E F:nth-child(n) | 选择父元素E的第n个子元素F |
| E F:nth-last-child(n) | 选择元素E的倒数第n个子元素F |
| E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 |
| E:nth-last-of-type(n) | 选择父元素内具有指定类型的倒数第n个E元素 |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素，与nth-of-type(1)等同 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素，与nth-last-of-type(1)等同 |
| E:only-child | 选择父元素只包含一个子元素，且该子元素匹配E元素 |
| E:only-of-type | 选择父元素只包含一个同类型的子元素，且该子元素匹配E元素 |
| E:empty | 选择没有子元素的元素，且该元素也不包含任何文本节点 |
结构伪类选择器的n是什么
参数n可以是整数（1、2、3、4）、关键字（odd、even），还可以是公式（2n+1、-n+5），参数n的起始值是1，不是0。
结构伪类选择器的参数按常用的情况划分为七种情形：
（1）参数n为具体的数值
这个数值可以是任何大于0的正整数，例如：:nth-child(3)。
（2）参数n为表达式n*length
选择n的倍数，其中n从0开始计算，而length为大于0的整数。例如：:nth-child(2n)。
（3）参数n为表达式n+length
选择大于或等于length的元素，例如：:nth-child(n+3)。
（4）参数n为表达式-n+length
选择小于或等于length的元素，例如：:nth-child(-n+3)。
（5）参数n为表达式n*length+b
其中b是想设置的偏移值，表示隔length个元素选中第n*length+b个元素，例如：:nth-child(2n+1)。
（6）参数n为关键词odd
选择系列中的奇数元素，其效果等同于:nth-child(2n-1)和:nth-child(2n+1)。
（7）参数n为关键词even
选择系列中的偶数元素，其效果等同于:nth-child(2n)。
:nth-child与:nth-last-child的区别：
:nth-child和:nth-last-child两个选择器的使用方法和所起的作用是一样的，用来选择某父元素中的特定子元素，同时所有的子元素不分类型，而且所有出现的子元素都会按文档流的先后顺序来排序。
:nth-child选择器选择的子元素是从第一个子元素开始算起；
:nth-last-child选择器选择的子元素是从最后一个子元素开始算起。
:nth-child和:nth-of-type的区别：
:nth-child选择的是某父元素的子元素，这个子元素并没有指定确切的类型，同时满足两个条件时才能有效果，其一是子元素，其二此子元素刚好处在那个位置；
:nth-of-type选择的是某父元素的子元素，并且这个子元素是指定类型。
:nth-of-type和:nth-last-of-type的区别
都是用来选择某父元素中指定类型的子元素。
:nth-of-type选择某类型的子元素是从前往后排序计算；
:nth-last-of-type选择的某类型子元素是从后向前排序计算。
八、否定伪类选择器
否定选择器:not()是css3的新增选择器，类似于jQuery中的:not()选择器，主要用来定位不匹配的该选择器的元素。
语法：E:not(F)匹配所有除元素F外的E元素。
例1：选择页面中所有元素，除了footer元素之外:not(footer){...}
例2：给表单所有input定义样式，除了submit按钮之外input:not([type=submit]){...}
九、伪元素
伪元素可用于定位文档中包含的文本，但无法在文档树中定位。伪类一般反映无法在CSS中轻松或可靠地检测到的某个元素属性或状态；伪元素表示DOM外部的某种文档结构。
CSS3中对伪元素进行了一定的调整，在以前的基础上增加一个冒号，双冒号与单冒号在CSS3中主要用来区分伪类和伪元素。
（1）伪元素::first-letter
::first-letter用来选择文本块的第一个字母，通常用于给文本元素添加排版细节，例如下沉字母或首字母。
例：制作首字下沉效果
1p:first-child::first-letter{
2 float:left;
3 color:#903;
4 padding:4px 8px 0 3px;
5 font:75px/60px Georgia;
6}
（2）伪元素::first-line
::first-line用来匹配元素的第一行文本，可以应用一些特殊的样式，给文本添加一些细微的区别。
例：制作首行文字效果
1p:last-child::first-line{
2 font:italic 16px/18px Georgia;
3 color:#903;
4}
最后一个段落的第一行文字显示为红色斜体。
（3）伪元素::before和::after
::before和::after不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。要为伪元素生成内容，还需要配合content属性。
（4）伪元素::selection
::selection用来匹配突出显示的文本。
1/*Webkit,Opera9/5+,IE 9+*/
2::selection{
3 background:颜色值;
4 color:颜色值;
5}
6/*Mozilia Firefox*/
7::-moz-selection{
8 background:颜色值;
9 color:颜色值;
10}
伪元素::selection仅接受两个属性，一个是background，另一个是color。
十、属性选择器
CSS3属性选择器列表
| 选择器 | 功能描述 |
|---|---|
| E[attr] | 选择匹配具有属性attr的E元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素，且attr的属性值为val |
| E[attr|=val] | 选择匹配E元素，且E元素定义了属性attr，attr属性值是一个具有val或者以val-开始的属性值 |
| E[attr~=val] | 选择匹配E元素，且E元素定义了属性attr，attr属性值具有多个空格分隔的值，其中一个值等于val。 |
| E[attr*=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值任意位置包含了val。 |
| E[attr^=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值以val开头的任何字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任何字符串 |
CSS3常见的通配符
| 通配符 | 功能描述 | 示例 |
|---|---|---|
| ^ | 匹配起始符 | span[class^=span]表示选择以span开头的所有span元素 |
$ |
匹配终止符 | a[href$=pdf]表示选择以pdf结尾的href属性的所有a元素 |
| * | 匹配任意字符 | a[title*=site]匹配a元素，且a元素的title属性值中任意位置有site字符的字符串 |
以上是关于CSS3之选择器的主要内容，如果未能解决你的问题，请参考以下文章