选择器做为CSS的灵魂一直是一个不可缺少的东西，使用CSS选择器的好处不用多说，对于整个文档的可读性 可修改性 以及在后面将要涉及到的关于对于CSS文档的复用性来说都是起到支柱性的作用。
1. CSS选择器常见的有几种
对于选择器我们可以根据复杂的程度可以大致分为5种。并且需要注意的是在这5种下还要分为各种情况。下面进行分类讨论:
- 基础选择器
| 选择器 | 含义 | 引用 |
|---|---|---|
| * | 通用元素选择器，匹配页面任何元素，很少使用。 | * { font-family: "微软雅黑"} |
| E | 标签选择器，匹配所有使用E标签的元素。 | p {color: red;} |
| . | class选择器，匹配所有class属性中包含info的元素。 | .nav {font-size: 20px;} |
| # | id选择器，匹配特定的id元素。 | #header { font-size: 16px;} |
- 组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用，分隔符，同时匹配E和F |
| E>F | 直接子元素选择器，匹配E元素的所有直接子元素F |
| E F | 后代选择器，选择E的所有后代元素F（包括子元素，子元素的后代等等） |
| E+F | 直接相邻选择器，匹配E元素之后的同级的相邻的子元素F |
| E~F | 普通相邻选择器，匹配E元素之后的所有同级的子元素 |
| E.element | 匹配class名是element的E元素 |
| E#element | 匹配id名是element的E元素 |
使用组合选择器主要优势是可以避免给标签加上过多的属性值，利用现有标签和属性为目的标签定义样式。
下面进行举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
h1,p {
color: red;
}
div p {
font-size: 20px;
}
div>p {
background-color: #ccc;
}
h1+p {
font-weight: bold;
}
h1~p {
font-style: italic;
}
p.pa {
border:1px solid red;
}
p#content {
border:1px solid #333;
}
</style>
</head>
<body>
<p>段落</p>
<div id="header">
<h1>这是一级标题</h1>
<div class="box">
<h1>这也是一级标题</h1>
<p>段落1</p>
<p class="pa">段落2</p>
<p id="content">段落3</p>
<p>段落4</p>
</div>
</div>
</body>
</html>
上面例子的效果图
- 属性选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素，div[id]就可以取到所有有id属性的div |
| E[attr=value] | 匹配属性attr值为value的元素，div[id=test],匹配id=test的div |
| E[attr~=value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 |
| E[attr^=value] | 匹配属性attr的值以value开头的元素 |
| E[attr$=value] | 匹配属性attr的值以value结尾的元素 |
| E[attr*=value] | 匹配属性attr的值包含value的元素 |
属性选择器把标签的属性值取出来做匹配。title,type,alt,src等属性都能匹配得到。可以用到的是E[attr=value]，可以用于<input>标签，设置type类型相同的表单元素有相同的样式。也可以用于统一设置<img>,<a>标签，或者当需要特别设置一个<img>或者<a>标签时，取它们的地址属性，不用再单独设置class或者id名。
举例来看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type="text"] {
border: 1px solid blue;
}
*[rel] {
text-decoration: none;
}
img[src="1.jpg"] {
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<form action="a.php">
姓名：<input type="text" name="name">
生日：<input type="text" name="birthday">
</form>
<img src="eg_submit.jpg" alt="图片1">
<a href="#" rel="链接">这是超链接
</a>
<div>
<img src="1.jpg" alt="图片2">
<a href="#">链接</a>
</div>
</body>
</html>
上面例子的效果图
- 伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:lang(c) | 匹配lang属性等于c的E元素 |
| E:enabled | 匹配表单中可用的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E::selection | 匹配用户当前选中的元素 |
| E:root | 匹配文档的根元素，对于HTML文档，就是HTML元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty | 匹配一个不包含任何子元素的元素，文本节点也被看作子元素 |
| E:not(selector) | 匹配不符合当前选择器的任何元素 |
- 伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素内容的第一行 |
| E::first-letter | 匹配E元素内容的第一个字母 |
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
E::before/E::after设置在对象前/后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。IE8以下不支持这两个选择器。
CSS3将伪元素选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。即E:after可转化为E::after。
注：本段大量参考了MDN 知乎 和 谷歌相关资料关于选择器更多资料详见该处
2. class 和 id 的使用场景?
两这区别和适用范围我们可以入下表所示
| 标签属性 | 区别 | 适用范围 |
|---|---|---|
| class | 类名可重复使用，权重为10，CSS中以.为开头 | 先定义好样式，然后供结构/内容调用 |
| id | id名具有唯一性，权重为100，CSS中以#为开头 | 先定位结构/内容，再定义样式 |
经过查询资料我们可以将使用场景归为
CLASS使用场景
CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
特性:可以把多个类，放在一个class属性里，但必须用空格隔开；如：class='btnsubmit btnopen
ID的使用场景
- 根据提供的唯一id号，快速获取标签对象。
- 用于充当label标签for属性的值。
3. 选择器的优先级是怎样的 对于复杂场景如何计算优先级
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
- ID选择器的特殊性值，加0,1,0,0。
- 类选择器、属性选择器或伪类，加0,0,1,0。
- 元素和伪元素，加0,0,0,1。
- 通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的 为什么？
- a:link 设置 a 对象在未被访问前的样式。
- a:visited 设置 a 对象在其链接地址已被访问过时的样式。
- a:hover 设置 a 对象在其鼠标悬停时的样式。
- a:acitve 设置 a 对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，a链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
所以正确顺序是a:link，a:visted，a:hover，a:active
5. 以下选择器分别是什么意思?
#header{/*id为header*/
}
.header{/*class为header*/
}
.header .logo{/*class为header下的class为logo的元素*/
}
.header.mobile{/*class为header下的class为mobile的元素*/
}
.header p, .header h3{/*class为header下的class为p的元素和class为header下的class为h3的元素*/
}
#header .nav>li{/*id为header下的class为nav的直接后代li元素*/
}
#header a:hover{/*id为header下的a标签在悬浮状态下*/
}
#header .logo~p{/匹配id为header的元素的后代class为logo 的元素之后的同级p标签*/
}
#header input[type="text"]{/*id为header下的type属性为text的input元素
}
6. 列出你知道的伪类选择器
- :hover, :active, :link. :visited
- :first-child, :last-child
- :first-of-type, :last-of-type
7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别
- div:first-child 匹配div作为其父元素的第一个子元素
- div:first-of-type 匹配div的父元素下使用第一个div标签的第一个div元素
- div :first-child 表示匹配div标签下的第一个后代元素
- div :first-of-type 表示匹配div下的后代元素标签中，相同类型标签的第一个子元素。
8.运行如下代码，解析下输出样式的原因
.item1:first-child{ color: red;}代表class值为item1的元素的父元素下的第一个子元素的字体颜色为红色，即第一个子元素p为红色，即aa为红色
.item1:first-of-type{background: blue;}代表class值为item1的元素的父元素下的第一个同类型的子元素的背景颜色为蓝色，代码中class值为item1的元素有三个，类型为两种p和h3，p元素对应父元素下的第一个同类型的子元素就是自己，即aa的背景为蓝色。两个h3元素对应父元素下的第一个同类型的子元素就是第一个h3元素，即bb的背景为蓝色
网友评论