CSS选择器

1. class 和 id 的使用场景?

class适用于类选择器，设置元素的class属性，为元素指定类名。多个元素可以拥有同一个类名。在CSS中，以.开头。
id适用于ID选择器，设置元素的id属性，每个id在文档中必须是唯一的。在CSS中，以#开头。ID选择器比类选择器的优先度更高。

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

基础选择器

选择器	含义
*	通用元素选择器，匹配页面上的�所有元素
#id	id选择器，匹配特定id的元素
.class	类选择器，匹配class�包含特定类的元素
element	标签选择器 如 p, h1

组合选择器

选择器	含义
E,F	多元素选择器，使用, 分隔,同时匹配元素E或者F
E F	后代选择器，使用空格分隔，匹配E元素的所有后代（子元素向下递归）元素F
E>F	子元素选择器，使用>分隔，匹配E元素的所有直接子元素（不会向下递归）
E+F	直接相邻元素选择器，使用+分隔, 匹配E元素的相邻同级元素F
E~F	普通相邻元素选择器，使用～分隔，匹配E元素之后的同级元素F(无论是否相邻)
.class1.class2	id选择器和类选择器书写时中间没有分隔符，.和#充当分隔符号
element#id	同id选择器，由于id都是唯一的，所以一般前面的element可省略

属性选择器

选择器	含义
E[attr]	匹配所有具有attr属性的E元素，div[id]能匹配所有有id属性的div元素
E[attr=value]	匹配所有attr属性为value的E元素，div[id=test]匹配所有id属性为test的div元素
E[attr~=value]	匹配所有attr属性具有多个空格分隔，其中一个值为value的元素
E[attr^=value]	匹配所有attr属性以value开头的E元素
E[attr$=value]	匹配所有attr属性以value结尾的E元素
E[attr*=value]	匹配所有attr属性包含value的E元素

伪类选择器

选择器	含义
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个子元素
E:nth-last-child(n)	匹配其父元素的倒数n个子元素
E:nth-of-type(n)	匹配使用同种标签的元素
E:nth-last-of-type(n)	匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素
E:first-of-type	匹配同种标签的第一个元素
E:last-of-type	匹配同种标签的最后一个元素

伪元素选择器

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

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

1. 属性后面使用!important的优先级最高
2. 内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

通过逐级的对比选择器来确定优先级。如：

  /*.class1属于类选择器优先级高于p标签选择器，所以下面的优先级高于上面的*/
  #test p.class1 {}
  #test .class1.class2 { }

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

a:link>a:visited>a:hover>a:active。
a:visited一定要放在a:link之后，这样才能保证访问过的样式具有a:visited样式。a:hover要放在a:link和a:visited之后，这样才不会被覆盖。而a:active要放在最后，因为当鼠标点击时会先触发a:hover。总结一下，就是事件触发的先后顺序。
由于伪类的选择器优先级一致，后面的a链接样式会覆盖前面的。
记忆方法 LVHA, love and hate

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

    #header{
    /*id选择器，匹配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标签的鼠标悬浮状态 */
    }
    #header .logo~p{
    /*匹配id为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个子元素
E:nth-last-child(n)	匹配其父元素的倒数n个子元素
E:nth-of-type(n)	匹配使用同种标签的元素
E:nth-last-of-type(n)	匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素
E:first-of-type	匹配同种标签的第一个元素
E:last-of-type	匹配同种标签的最后一个元素

7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

• div:first-child 匹配div，该div是其父元素的第一个子元素
• div:first-of-type匹配div标签在其父元素中第一次出现
• div :first-child 匹配所有div下的第一个子元素
• div :first-of-type匹配 div标签下第一次出现的子元素
  空格表示后代选择器

8. 运行如下代码，解析下输出样式的原因。

    <style>
    .item1:first-child{
      /*first-child选择class为item1在其父元素中的第一个子元素，所以aa字体颜色为红*/
      color: red;
    }
    .item1:first-of-type{
     /*first-of-type选择class为item1在其父元素中第一次出现的标签，所以p和h3标签背景色为蓝色*/
      background: blue;
    }
    </style>
     <div class="ct">
       <p class="item1">aa</p>
       <h3 class="item1">bb</h3>
       <h3 class="item1">ccc</h3>
     </div>