1. class 和 id 的使用场景 ?
class 规定元素的类名，用于概念上相似的元素，这些元素可以出现在同一页面上的多个位置。
id 用于不同的唯一的元素。例如：标志（#logo）、导航（#nav）、主体内容（#content）、版权（#copyright）等等。
最好在确定一个元素只会出现一次的情况下，才使用 id ，如果感觉以后可能需要相似的元素，就使用 class 。
2. CSS 选择器常见的有几种 ?
CSS 选择器的类型：
- 基础选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
２.1 基础选择器
| 选择器 | 含义 | 例子 |
|---|---|---|
| * | 通配符选择器，匹配页面所有元素（很少使用） | * {color:red;} 使文档中的每个元素都为红色 |
| #id | id选择器 | #intro {font-weight:bold;} 将 id 属性值为 intro 的元素设置为粗体 |
| .class | 类选择器 | .important {color:red;} 将类名为 important 的所有元素文字颜色设置为红色 |
| element | 元素选择器／类型选择器 | h1 {color:blue;} 将 h1 标题的文字颜色设置为蓝色 |
２.2 组合选择器
| 选择器 | 含义 | 例子 |
|---|---|---|
| E,F | 多元素选择器，同时匹配元素 E 和元素 F | h2,p {color:gray;} 将 h2 标题和段落的文字颜色设置为灰色 |
| E F | 后代选择器 / 包含选择器，匹配 E 元素所有后代中的元素 F | h1 em {color:red;} 匹配 h1 元素后代的所有 em 元素，文字颜色设置为红色 |
| E>F | 子元素选择器，匹配 E 元素的所有直接子元素 F | h1 > strong {color:red;} 匹配作为 h1 元素子元素的 strong 元素，文字颜色设置为红色 |
| E+F | 相邻兄弟选择器，匹配紧接在 E 元素后的元素 F ，且二者有相同父元素 | h1 + p {color:red;} 选择紧接在 h1 元素后出现的段落，h1 和 p 元素有共同的父元素，文字颜色设置为红色 |
| E~F | 普通兄弟选择器，两种元素有共同的父元素，但是元素 E 不必直接紧随元素 F | p~ul {background:#ff0000;} 为 p 元素之后的所有 ul 元素设置背景，p 元素和 ul 元素具有相同的父元素 |
| .class1.class2 | 匹配同时包含这些类名的元素（类名的顺序不限） | .important.warning {background:silver;} 类名中同时包含 important 和 warning 的所有元素设置银色背景 |
| element.class | 匹配含有特定类名的元素 | p.important {color:red;} 将类名为 important 的所有 p 元素文字颜色设置为红色 |
举个例子：
table.company td > p
/*匹配 td 元素的子元素 p，td 元素是 table 元素的后代元素，table 元素的类名包含 company*/
html > body table + ul {......}
/*匹配 table 元素的兄弟元素 ul，table 元素是 body 元素的后代元素，body 元素是 html 元素的子元素*/
２.3 属性选择器
| 选择器 | 含义 | 例子 |
|---|---|---|
| E[attr] | 匹配所有具有属性 attr 的元素 | a[href][title] {color:red;} 匹配同时拥有 href 属性和 title 属性的 a 元素，文字颜色设置为红色 |
| E[attr = value] | 匹配属性 attr 值为 value 的元素 | a[href="http://jsbin.com"] [title="jsbin"]{color: red;} 匹配 href 属性值为 http://jsbin.com，title 属性值为 jsbin 的 a 元素，文字颜色设置为红色 |
| E[attr ~= value] | 匹配属性 attr 值中包含 value 的元素，value 不能选取属性值单词的一部分 | img[title~="Figure"] {color: red;} 匹配 title 属性值中包含 Figure 的 img 元素，文字颜色设置为红色 |
| E[attr ^= value] | 匹配属性 attr 的值以 value 开头的元素 | div[title^="intro"] {color: red;} 匹配 title 属性值以 intro 开头的 div 元素，文字颜色设置为红色 |
| E[attr $= value] | 匹配属性 attr 的值以 value 结尾的元素 | div[title$="intro"] {color: red;} 匹配 title 属性值以 intro 结尾的 div 元素，文字颜色设置为红色 |
| E[attr *= value] | 匹配属性 attr 值中包含 value 的元素，value 可以选取属性值单词的一部分 | a[href*="w3school.com.cn"] {color: red;} 匹配 href 属性值包含 w3school.com.cn 的 a 元素，文本颜色设置为红色 |
| E[attr | =value] ：匹配带有以指定值开头的属性值的元素，该值必须是整个单词。实例： | |
| ` *[lang | ="en"] {color: red;} 匹配 lang 属性等于 en 或以 en- 开头的所有元素。` |
２.4 伪类选择器
2.4.1 锚伪类
链接的不同状态可以用不同的方式显示，这些状态包括：未被访问状态 (a:link)，已被访问状态 (a:visited)，活动状态 (a:visited) 和鼠标悬停状态 (a:hover)。
注意：
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
| 选择器 | 含义 | 例子 |
|---|---|---|
| a:link | 匹配所有未被访问的链接 | a:link {color: blue} 未被访问的链接，文字颜色为蓝色 |
| a:visited | 匹配所有已被访问的链接 | a:visited {color: purple} 已被访问的链接，文字颜色为紫色 |
| a:hover | 匹配鼠标悬停其上的E元素 | a:active {color: red} 被鼠标悬停的链接，文字颜色为红色 |
| a:active | 匹配鼠标已在其上按下、还没有释放的E元素 | a:hover {color: yellew} 已被选定的链接，文字颜色为黄色 |
举个例子：
a.red : visited {color: #FF0000}
/*类名为 red 的 a 元素，被访问后链接的文字颜色为红色*/
2.4.2 :lang 伪类
| 选择器 | 含义 |
|---|---|
| E:lang(c) | 匹配 lang 属性等于 c 的E元素 |
举个例子：
/*lang 类为属性值为 no 的 q 元素定义引号的类型为 ~ */
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
2.4.3 其他伪类选择器
| 选择器 | 含义 | 例子 |
|---|---|---|
| E:focus | 匹配当前获得焦点的元素 E | input:focus {background-color:yellow;} 表单获得焦点后输入控件背景色变成黄色 |
| E:root | 匹配文档的根元素，对于HTML文档，就是 html 元素 | :root {background:grey;} 设置 HTML 文档的背景色为灰色 |
| E:empty | 匹配一个不包含任何子元素的元素，文本节点也被看作子元素 | p:empty { background:red;} 匹配空的 p 元素的背景色为红色 |
| E:target | 匹配当前活动的 E 元素 | p:target { border: 2px solid #D4D4D4;background-color: #e5eecc;} 为当前活动的 HTML 锚设置样式 |
| E:enabled | 匹配表单中可用的元素 | input:enabled {background:#ffff00;} 为所有已启用的 input 元素设置背景色 |
| E:disabled | 匹配表单中禁用的元素 | input:disabled {background:#ffff00;} 为所有已禁用的 input 元素设置背景色 |
| E:checked | 匹配表单中被选中的 radio 或 checkbox 元素，只有 Opera 浏览器支持 | input:checked {background-color: #ff0000;} 为所有被选中的 input 元素设置背景色 |
| E:not(selector) | 匹配非指定元素/选择器的每个元素 | :not(p) {background-color: #ff0000;} 设置非 p 元素的所有元素的背景色 |
| E::selection | 匹配用户当前选中的元素。只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。注意在 在Firefox 浏览器中需使用 E::-moz-selection | ::selection{color:#ff0000;} 使被选中的文本成为红色 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of type(1) | p:first-of-type {background:red;} 匹配 p 元素的父元素下的第一个类型为 p 的子元素，设置背景色为红色 |
| E:nth-of-type(n) | 匹配父元素下使用同种标签的第 n 个子元素 | p:nth-of-type(2) {background:red;} 匹配 p 元素的父元素下的第二个类型为 p 的子元素，设置背景色为红色 |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) | p:last-of-type {background:red;} 匹配 p 元素的父元素下的最后一个类型为 p 的子元素，设置背景色为红色 |
| E:nth-last-of-type(n) | 匹配父元素下使用同种标签的倒数第 n 个子元素 | p:nth-last-of-type(3) {background:red;} 匹配 p 元素的父元素下的倒数第三个类型为 p 的子元素，设置背景色为红色 |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素 | p:only-of-type {background:#ff0000;} 匹配 p 元素的父元素下的唯一一个类型为 p 的子元素 |
| E:first-child | 匹配其父元素的第一个子元素 | p:first-child {font-weight: bold;} p 元素是某元素的第一个子元素，设置字体加粗 |
| E:nth-child(n) | 匹配其父元素的第 n 个子元素，第一个编号为1 | p:nth-child(2) {background:#ff0000;} p 元素是某元素的第 2 个子元素，设置背景色为红色 |
| E:last-child | 匹配其父元素的最后一个子元素，等同于:nth-last-child(1) | p:last-child { background:#ff0000;} p 元素是某元素的最后一个子元素，设置背景色为红色 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 | p:nth-last-child(2) {background:#ff0000;} p 元素是某元素的倒数第二个子元素，设置背景色为红色 |
| E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) | p:only-child {background:#ff0000;} p 元素是某元素的唯一一个子元素，设置背景色为红色 |
n 的取值：
① 1，2，3，4，5...
② an+b，例如：2n+1, 2n, 4n-1
③ odd, even
２.5 伪元素选择器
| 选择器 | 含义行 | 实例 |
|---|---|---|
| E::first-line | 匹配 E 元素内容的第一行，只能用于块级元素 | p::first-line {color:#ff0000} 设置段落的首行文字颜色为红色 |
| E::first-letter | 匹配 E 元素内容的第一个字母，只能用于块级元素 | p::first-letter {color:#ff0000} 设置段落的首字母颜色为红色 |
| E::before | 在 E 元素之前插入生成的内容 | h1::before {content:url(logo.gif);} 在每个 h1 元素前插入一幅图片 |
| E::after | 在E元素之后插入生成的内容 | h1::after {content:url(logo.gif);} 在每个 h1 元素后插入一幅图片 |
3. 选择器的优先级是怎样的 ? 对于复杂场景如何计算优先级 ?
选择器的优先级从高到低分别是：
- 在属性后面使用
!important会覆盖页面内任何位置定义的元素样式 - 作为 style 属性写在元素标签上的内联样式
- id 选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
在复杂场景时，CSS 选择器优先级的计算方法：
- 记 id 选择器的个数为 a
- 记类选择器、属性选择器、伪类选择器的个数为 b
- 记类型选择器 / 元素选择器、伪元素选择器的个数为 c
- 忽略所有的通配选择器（*）
注意：
- 将 a, b,c 连接起来构成整个选择符的优先级。
- 否定伪类选择器 :not() 中的选择符同样会被计算优先级，但否定选择器本身不计算。
- 外部样式表与当前文件内样式表具有同样的优先级。
CSS2.1 标准中指出，HTML style 属性比样式表拥有更高的优先级。 - 重复同样的选择符可用来增加优先级（例如 .active.active）。
- 对于相同优先级的规则，写在后面的会覆盖前面的。
举个例子：
* /* a=0 b=0 c=0 -> 优先级 = 0 */
li /* a=0 b=0 c=1 -> 优先级 = 1 */
ul li /* a=0 b=0 c=2 -> 优先级 = 2 */
ul ol+li /* a=0 b=0 c=3 -> 优先级 = 3 */
h1 + *[rel=up] /* a=0 b=1 c=1 -> 优先级 = 11 */
ul ol li.red /* a=0 b=1 c=3 -> 优先级 = 13 */
li.red.level /* a=0 b=2 c=1 -> 优先级 = 21 */
#x34y /* a=1 b=0 c=0 -> 优先级 = 100 */
#s12:not(foo) /* a=1 b=0 c=1 -> 优先级 = 101 */
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
四种链接状态： a:link、a:hover, a:active 及 a:visited 的正确顺序（LVHA）：
① a:link
② a:visited
③ a:hover
④ a:active
<a> 标签的这四个伪类的特殊性是一样的，写在后面的样式会覆盖前面的。当链接未被访问时，a:link 处于激活状态，链接显示 a:link 的伪类样式。当链接已被访问时，应展示 a:visited 的伪类样式。由于一个链接要么被访问过要么未被访问过，不可能同时满足，所以 a:link 和 a:visited 的位置无关紧要，一般将 a:link 写在 a:active 前面。
若将鼠标悬停至已被访问的链接上，那么浏览器仍应展示 a:hover 的伪类样式，故 a:hover 位于 a:visited 之后。
当鼠标悬停至链接上并点击链接不松开时，经历了鼠标悬停到鼠标点击的过程，故浏览器应先展示 a:hover 的伪类样式，后展示 a:active 的伪类样式，这就使得 a:active 的位置必须位于 a:hover 之后。
综上所述，<a> 标签这四个伪类的顺序为 L-V-H-A 。
5. 以下选择器分别是什么意思?
#header{ /*匹配 id 为 header 的元素*/
}
.header{ /*匹配类名为 header 的所有元素*/
}
.header .logo{ /*匹配类名为 header 的元素下所有类名为 logo 的后代元素*/
}
.header.mobile{ /*匹配同时拥有类名 header 和类名 mobile 的元素*/
}
.header p, .header h3{ /*匹配类名为 header 的所有后代元素 p 以及类名为 header 的所有后代元素 h3*/
}
#header .nav>li{ /*匹配 id 为 header 的元素下类名为 nav 的后代元素的所有子元素 li*/
}
#header a:hover{ /*匹配 id 为 header 的元素下所有处于鼠标悬停状态的 a 元素*/
}
#header .logo~p{ /*匹配 id 为 header 的元素下类名为 logo 的后代元素的所有兄弟元素 p*/
}
#header input[type="text"]{ /*匹配 id 为 header 的元素下所有 type 属性值为 text 的 input 元素*/
}
6. 列出你知道的伪类选择器
答案见本文 2.4 伪类选择器。
7. div:first-child 和 div:first-of-type 的作用和区别
:first-child 选择器是 CSS 2 中定义的选择器，:first-of-type 选择器是 CSS 3 中定义的选择器。
div:first-child：匹配 div 的父元素下的第一个子元素，若第一个子元素不是 div， 则无法匹配到任何元素。
div:first-of-type：匹配 div 的父元素下第一个类型为 div 的元素。这里不再限制是第一个子元素了，只要是该类型元素的第一个就可以。
例如：
<div>
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<a>第三个子元素</a>
<span>第四个子元素</span>
</div>
/* p:first-child 和 p:first-of-type 均匹配到 p 元素，因为 p 元素既是第一个子元素，也是第一个类型为 p 的子元素。*/
/* h1:first-child 匹配不到任何元素，因为 div 的第一个子元素不是 h1*/
/* h1:first-of-type 匹配到 h1 元素，因为 h1 元素是 div 元素下第一个类型为 h1 的元素*/
8. 运行如下代码，解析下输出样式的原因
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
.item1:first-child { color: red; } 匹配类名为 item1 的元素的父元素下的第一个子元素，此时选中的是 p 元素，故 p 元素的内容 aa 字体显示红色。
.item1:first-of-type { background: blue; } 匹配类名为 item1 的元素的父元素下的首个特定类型的元素，此时选中的是 p 元素和第一个 h3 元素，故 p 元素和第一个 h3 元素的背景显示蓝色。
