CSS选择器

1.class和id选择器的使用场景

id选择器匹配特定id的元素，在整个页面中是唯一的。
class是类选择器，匹配包含(不是等于)特定类的元素。

2.CSS常见的选择器

1. 通用元素选择器
   <style>
*{color:red;}
</style>

2. id选择器
   <style>
#box{color:red;}
</style>
<div id="box"> <p>jirengu</p> </div>

3. 类选择器
   <style> .box{color:.red;} </style> <div class="box"> jirengu </div>

4. 标签选择器
   <style> div{color:red;} </style> <div> jirengu </div>

5. 派生选择器 （选择元素下的子元素）
   <style> .box p{color:red;} </style> <div class="box"> <p>jirengu</p> </div> <div class="box"> hhh </div>

6. 多元素选择器（同时匹配元素）
   <style> .box,#mix{color:red} </style> <div class="box"> jirengu </div> <div id="mix"> hhh </div>

7. 伪类选择器(标签，class后面加伪类)

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

选择器从高到低分别是

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

复杂场景优先级计算
选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果一个选择器规则有多个相同类型选择器，则+1。等级如下：
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d

选择器	特殊性
style="color: red"	a= 1, 0, 0, 0
#id {}	0, b=1, 0, 0
#id #aid	0,b= 2, 0, 0
.sty {}	0, 0, c=1, 0
.sty p[title=""] {}	0, 0, c=2, 0
p:hover {}	0, 0,c= 1, 0
p {}	0, 0, 0,d= 1
ul::after {}	0, 0, 0, d=1
div p {}	0, 0, 0,d= 2

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

正确顺序应为：a：link a：visited a:hover a:active

原因：

1. 当选择器优先级别相同时，后定义的会覆盖先定义的
2. 以此类推，当鼠标经过未访问链接，同时有link和hover属性，
   由于后定义的覆盖先定义的，所以hover在后面
3. 以此类推，当鼠标经过已访问链接，同时有visited和hover属性，
   由于后定义的覆盖先定义的，所以hover在link和visited后面

5.以下选择器分别是什么意思?

• .#header{}：匹配Id=header的元素
• .header{}:匹配类class=header的元素
• header .logo{}：
  匹配类为header元素的后代元素中类为logo的元素
• .header.mobile{}：
  匹配class同时包含header和mobile的元素
• .header p, .header h3{}：
  匹配两个类型的元素（并集，‘或’关系），类型1是header类的后代p标签，类型2是header类的后代h3标签
• .#header .nav>li{}：
  匹配id为header的后代中，类名为nav的直接子元素中的li标签
• .#header a:hover{}：
  匹配id为header的后代a标签在hover状态（鼠标悬停其上）下的样式
• .#header .logo~p{}：
  匹配id为header的后代中，类名为logo的元素之后的同级元素中的p标签
• .#header input[type="text"]{}
  id为header的后代中，input标签中属性type的值为"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	匹配用户当前选中的元素

7.div:first-child和div:first-of-type的作用和区别?

• first-child匹配的是其父元素的第一个子元素；
• first-of-type匹配的是其父元素下相同类型子元素中的第一个。

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>
结果：

QQ截图20170227221048.png

原因：

• .item1:first-child选中的是类名位item1的父元素div下的第一个元素则为p标签里面的aa，所有aa显示为红色
• .item1:first-of-type选中的是类名为item1的父元素div下的同类元素的第一个元素，即p元素中的第一个p元素里面的aa和2个h3元素中的第一个h3元素里的内容bb，所有aa和bb的背景色为蓝色。