关于选择器

1.class 和 id 的使用场景?

id选择器：
形如#name ;
优先级高于class选择器；
一个标签只能有一个id且每个id只能使用一次,多用于页面分块的块级标签上,如一个页面的导航区,内容区,页脚等;
用于控制单个元素的样式；
class选择器：
形如.name ；
可以定义多个元素共同样式；
一个标签可以有多个类且同一个类可以用到不同的标签上；

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

基础选择器	含义
*	通用元素选择器
#id	id选择器
.class	类选择器
element	标签选择器

组合选择器	含义
E,F	多元素选择器
E F	后代选择器
E>F	子元素选择器
E+F	直接相邻选择器
E~F	普通相邻选择器（同级）
.class1.class2	中间无分隔符，. 和 # 充当分隔符的元素
element#id	同上

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

伪类选择器	含义
E:first-child	第一个子元素
E:link	链接未被点击
E:visited	链接已经被点击
E:active	鼠标按下还没被释放
E:hover	鼠标划过，悬停
E:focus	光标聚焦
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)	使用同种标签的元素，其他同E:nth-child(n)
E:nth-last-of-type(n)	针对同种标签元素，其他同E:nth-last-child(n)
E:last-child	最后一个子元素，同:nth-last-child(1)
E:first-of-type	父元素下使用同标签的第一个子元素，同:nth-of-type(1)
E:last-of-type	父元素下使用同标签的最后一个子元素

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

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

优先级由上到下：
①在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
②作为style属性写在元素标签上的内联样式
③id选择器
④类选择器
⑤伪类选择器
⑥属性选择器
⑦标签选择器
⑧通配符选择器
⑨浏览器自定义

针对复杂场景：
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d*
权重计算：4个等级（a b c d）由高到低，依次比较：

例子	a	b	c	d
* {}	0	0	0	0
a:hover {}	0	0	1	1
h1+input[type=hidden] {}	0	0	1	2
div#header:after {}	0	1	0	2
style=""	1	0	0	0

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

顺序：
① a:link 未被点击
② a:visited 已经被点击
③ a:hover 鼠标滑过
④ a:active 鼠标按下了还没被释放
原因：伪类选择器优先级相同,后面的会覆盖前面的样式；
正常顺序，鼠标划过->鼠标按下->鼠标释放；故而 a:hover 要放在 a:active前面；又因为正常的链接已经被点击过的话，a:visited样式会永久存在，若是放在下面会覆盖其他效果的，所以a:visited要放在其他2者前面；

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的元素后代中包含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题

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类型中的第一个子元素；

例子：
css:
div:first-child{
  color:red;
}
div{
  margin-top:10px;
}
div:first-of-type{
  background:blue;
}
html:
  <div>1</div>
  <div>2</div>
  <div>   
      <p>div-p</p>
      <div>div-div</div>
  </div>
  <div>3</div>

结果： :first-child/:first-of-type

div :first-child 表示匹配div标签下的第一个后代元素
div :first-of-type 表示匹配div下的后代元素标签中，相同类型标签的第一个子元素。

例子：
css:
div :first-child{
  color:red;
}
div{
  margin-top:10px;
}
div :first-of-type{
  background:blue;
}
html:
 <div>1</div>
 <div>   
     <p>
         div-p
         <p>div-p-p</p>
     </p>
     <div>div-div
     <p>div-div-p</p>
    </div>
 </div>

结果： :first-child/ :first-of-type(加空格)

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

.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>/*.item1父元素下的第一个子元素字体变红；
其父元素下的第一个p标签子元素背景变蓝*/

   <h3 class="item1">bb</h3>/*.item1父元素下的第一个h3标签子元素背景变蓝*/

   <h3 class="item1">ccc</h3>
 </div>