CSS选择器

class 和 id 的使用场景?

class：类选择器，指定标签的类名。可以用到不同的标签上。
id：id选择器，指定标签的id，定位到页面的唯一元素。

CSS选择器常见的有几种?

CSS常见的选择器共有5种，分别为：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器。

基础选择器

选择器	含义
*	通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
#id	id选择器
.class	类选择器
element	标签选择器

组合选择器

选择器	含义
E,F	并列选择器，用,分隔，同时匹配元素E或元素F
E F	后代选择器，用空格分隔，匹配E元素所有的后代元素F
E>F	子元素选择器，用>分隔，只匹配E元素第一层级子元素
E+F	直接相邻选择器，只匹配E元素之后的第一个相邻的同级元素F
E~F	普通相邻选择器，匹配E元素之后的所有同级元素F
.class1.class2	中间没有分隔符，同时具有.class1和.class2选择器

属性选择器

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

伪类选择器

CSS伪类是加在选择器后面的用来指定元素状态的关键字。

选择器	含义
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:hover	匹配鼠标悬停其上的E元素
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:first-child	匹配其父元素的第1个子元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:first-of-type	匹配父元素下拥有该选择器的同种类型的第一个子元素，等同于:nth-of-type(1)

伪元素选择器

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

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

CSS优先级从高到低分别是：

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

复杂场景：

**计算方法：
a=行内样式

b=ID选择器
c=类，伪类和属性选择器
d=标签选择器、伪元素选择器
**

举个例子：

*             {}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
p             {}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover       {}  /* a=0 b=0 c=1 d=1 -> 0,0,1,1 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{}  /* a=0 b=0 c=1 d=2 -> 0,0,1,2 */
ul ol li.active   {}  /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p        {}  /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after  {}  /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
style=""          /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */
依照a、b、c、d 权重依次递减,每次比较先由a开始。

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

顺序：
a:link
a:visited
a:hover
a:active
原因：
一、 当选择器优先级别相同时，后定义的会覆盖先定义的
二、

• 鼠标经过的“未访问链接”同时激活a:link、a:hover两种属性，如果a:link放在后面，在链接未被访问的状态，a:hover就被a:link覆盖，只会显示a:link的属性；
• 鼠标经过的“已访问链接”同时激活a:visited、a:hover两种属性，如果a:visited放在后面，那么在链接被访问状态，只会显示a:visited的属性；
• 当鼠标点击链接是同时拥有a:active和a:hover两种属性，若a:hover放后面会覆盖a:active的属性定义
  故hover在link和visited后面，active放在hover后面，按照一般性原则，link最好放最前面。

以下选择器表示的含义

#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的元素包裹的处于hover状态的a元素 */
}
#header .logo~p{         /*   id为header的元素包裹的class为logo的元素后面的同级元素p */
}
#header input[type="text"]{         /*   id为header的元素包裹的type=text的input元素 */
}

列出知道的伪类选择器

见标题2下的回答

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

• div:first-child div父元素下，也就是与div同级的元素中的第一个元素，且这个元素为div
• div:first-of-type div父元素下的第一个使用div的标签
• div :first-child div元素下的第一个子元素
• div :first-of-type div元素下所有的同类型的第一个元素

div:first-child 运行代码如下：

故 div:first-child是同级元素中的第一个元素，位置上第一，且这个元素具有相同类型的div。

div:first-of-type 运行代码如下：

故 div:first-of-type是其同级元素中，不同标签位置第一的元素，且具有同种类型的div。

div :first-child 运行代码如下：

故 div :first-child只要是div下位置位于第一的元素即可，不必具有同种类型的div。

div :first-of-type 运行代码如下：

故 div :first-of-type只要是div下不同标签位置位于第一的元素即可,不必具有同种类型的div。

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

运行结果：

• class为item1父元素就是class为ct的div，然后找到的第一个子元素，匹配是否有item1，匹配成功，故aa颜色设置为red；
• class为item1父元素就是class为ct的div，然后在该div下，寻找各类标签的第一个元素，匹配是否为item1。发现第一个p标签,h3第一个标签满足条件，所以aa,bb的背景色变蓝。