css选择器

1. class 和 id 的使用场景?

对于CSS而言，id和class都是选择器。
1. ID具有唯一性，Class具有普遍性。
2. ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。
3. Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
4. ID的样式优先级高于Class。

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

CSS常用几种选择器有：ID选择器，类选择器，元素选择器，子选择器，后代选择器，伪类选择器，属性选择器等。这些选择器的常用表示方式是：
ID选择器：#container {}
类选择器：.box{}
元素选择器：p {}
子选择器：ul > li {}
后代选择器：div p {}
伪类选择器：a:visited {}
属性选择器：input[type="text"] {}

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

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

分4个等级的定义如下：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

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

link:连接平常的状态 active:连接被按下的时候 visited:连接被访问过之后 hover:鼠标放到连接上的时候

a:link{text-decoration:none ; color:#c00 ;}
a:visited {text-decoration:none ; color:#c30 ;}
a:hover {text-decoration:underline ; color:#f60 ;}
a:active {text-decoration:none ; color:#F90 ;} 

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

#header{ } id为header的元素
.header{ } class为header的元素
.header .logo{ } class为header 子元素中 class为logo的元素
.header.mobile{ } class同时包含header和mobile的元素
.header p, .header h3{ } class为header元素中的p标签和h3标签
#header .nav>li{ } id为header的class为nav元素的直接子元素为li的标签
#header a:hover{ } id为header元素中的a标签的hover状态
#header .logo~p{ } id为header下 class为logo标签之后所有的p标签
#header input[type=“text”]{ } id为header的后代中，input标签中，属性type的值为"text"的元素集合

6. 列出你知道的伪类和伪元素

伪类选择器

:first-child 选择元素的第一个子元素
:link  指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚
:visited  指示作为已访问地址超链接的所有的锚
:hover  指示鼠标指针停留在那个元素上
:active  指示被用户输入激活的元素
:focus   可以接受键盘输入或者能以某种方式激活的元素
:lang()  根据元素的语言来选择

CSS3新增:

E:not(s)  匹配不含有s选择符的元素E
E:root  匹配E元素在文档的根元素
E:last-child  匹配父元素的最后一个子元素E
E:only-child  匹配父元素仅有的一个子元素E
E:nth-child(n)  匹配父元素的第n个子元素E
E:nth-last-child(n)  匹配父元素的倒数第n个子元素E
E:first-of-type  匹配同类型中的第一个同级兄弟元素E
E:last-of-type  匹配同类型中的最后一个同级兄弟元素E
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n)  匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n)  匹配同类型中的倒数第n个同级兄弟元素E
E:empty  匹配没有任何子元素（包括text节点）的元素E
E:checked  匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled  匹配用户界面上处于可用状态的元素E
E:disabled  匹配用户界面上处于禁用状态的元素E
E:target  匹配相关URL指向的E元素

:first-child、:link和:visited是静态伪类，:focus、:hover和:active是动态伪类

结合伪类: 如: a:link:hover = a:hover:link 顺序并不重要，但是不要把互斥的伪类结合在一起使用。如 a:link:vistited没有任何意义

伪元素

:first-letter  设置首字母样式
:first-line  设置第一行样式
:before  设置之前
:after  设置之后

CSS3新增:

::placeholder
::selection

在CSS3中为了和伪类进行区分，写法为::first-letter、::first-line、::first-line、::first-line
:first-letter和:first-line 使用都是有限制的。另外，所有伪元素都必须放在出现该伪元素的选择器的最后面。

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

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素

<div>
    <p>第一个子元素</p>
    <h2>第二个子元素</h2>
    <span>第三个子元素</span>
    <span>第四个子元素</span>
</div>

p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child  匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child  匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；
:first-child  匹配到的是p元素,因为在这里div的第一个子元素就是p。

在css3中又定义了:first-of-type这个选择器

<div>
    <p>第一个子元素</p>
    <h2>第二个子元素</h2>
    <span>第三个子元素</span>
    <span>第四个子元素</span>
</div>

p:first-of-type  匹配到的是p元素,因为p是div的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素；
h1:first-of-type  匹配到的是h1元素，因为h1是div的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素；
span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是第一个。
:first-of-type  匹配到的是p元素

所以

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的