入门7 css选择器

1. class 和 id 的使用场景?

class：制定标签的类名。
格式：<input type="button" class="btnsubmit" />
场景：CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
特性：不唯一

---

id:指定标签的唯一样式。
格式：`<input type=password id=""userpwd />
场景：

1. 根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)

2. 用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。

特性：本页面唯一。

---

name:指定标签的名称。
格式：<input type=text name="username" />
应用场景：

1. form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username='text的值'。
2. input type='radio'单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。
   <input type="radio" name='sex'/>男<input type="radio" name='sex'/>女
3. 快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等。

---

摘自参考答案：
class 重在样式的复用，重普遍性。
id重在划分样式区域，可以作为样式表中的命名空间来管理样式。
id也可以指定某一个特殊元素的样式，重特殊性。
注意：在html中声明多个一样的ID的元素，在css中该ID的样式，这些元素则都会生效。而在javascript中用DOM选择器只会选到第一个元素。

2. CSS选择器常见的有几种?

1. 基础选择器

选择器	含义
*	通用元素选择器，匹配页面任何元素（所以用的少）
#id	匹配特定id元素，id单一
.class	类选择器，匹配class包含（不是等于）特定类的元素，一类
element	标签选择器

2. 组合选择器

选择器	含义
E,F	多元素选择器，用,分隔，同时匹配元素E或元素F
E F	后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F	子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
element#id	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

3. 属性选择器

选择器	含义
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的元素

4. 伪类选择器

选择器	含义
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)	匹配不符合当前选择器的任何元素

5. 伪元素选择器

选择器	含义
E::first-line	匹配E元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容

所有选择器列表在 MDN

3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？

一般情况：

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

复杂情况：

• 行内样式 <div style="xxx"></div> ==> a
• ID 选择器 ==> b
• 类，属性选择器和伪类选择器 ==> c
• 标签选择器、伪元素 ==> d
  依次比较，级别相同比数量，级别数量都相同比较顺序。!important为最高级。

4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

选择器	状态
a:link	未访问状态
a:hover	鼠标悬停的状态
a:active	鼠标点击未离开的状态
a:visited	访问过的状态

根据css选择器优先级规则，这四个伪类选择器优先级相同，数量相同，所以写在后面的样式会覆盖写在前面的样式；
链接不可能同时处于未访问和已访问两种状态；
鼠标经过的“未访问链接”同时触发a:link、a:hover两个伪类；
鼠标经过的“已访问链接”同时拥有a:visited、a:hover两个伪类；
鼠标在点击链接但是未释放时，会同时触发a:hover、a:active两个伪类；
所以：a:link、a:visited 顺序可以互换，a:hover定义一定要放在a:link、a:visited的后面，a:active 需要放到 a:hover 后面。

---

• :link代表为访问链接的样式，所以只要你是超链接，且未被访问过，则链接都会按照你设定的样式显示，所以它的位置顺序无所谓。
• :visited代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式
• :active 选择器用于选择活动链接。当您在一个链接上点击时，它就会成为活动的（激活的）。
• :hover 代表的是你光标经过某一元素时的样式，如果将此样式放在:active之后，则当链接激活时，显示:active样式，当光标经过此链接时，会显示hover的样式，因为hover排在后，会覆盖active样式。如果:hover排在前，:active排在后，则当光标激活时显示:active的样式，但当光标经过链接时，样式并未显示:hover的样式，而是:active的样式，因为应用的active样式在hover之后，覆盖了前面的样式。

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的后代中p元素和h3元素
#header .nav>li{}匹配id=header的后代中所有class=nav的直接子元素li
#header a:hover{}匹配id=header的后代中所有处于hover状态的a元素
#header .logo~p{}匹配class=header的后代中，class=logo的元素之后的同级元素p
#header input[type="text"]{}匹配id=header的后代元素中，input标签的属性为text的标签

6. 列出你知道的伪类选择器

选择器	含义
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)	匹配不符合当前选择器的任何元素

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 :first-child匹配所有div元素内所有元素中属于其父元素的首个子元素
div :first-of-type匹配所有div元素内所有元素中属于其父元素的首个类型的子元素

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>

运行结果.png
.item1:first-child{color:red}匹配作为第一子女中的元素class=item1，并将其设置为红色，所以aa颜色为红色。
.item1:first-of-type{background:blue}匹配父元素下使用同种标签的第一个子元素，并将其背景设置为蓝色。aa为p标签的第一子元素，bb为h3标签的第一子元素，ccc为h3标签的第二子元素，所以aa,bb的背景色为蓝色。