CSS：选择器

一、class与id的使用场景

class
类选择器，匹配class包含特定类的元素，可以管控多个含有相同类的元素；
id
id选择器，匹配特定id的元素，id是唯一的。

二、CSS常见选择器

基础选择器

# 通用元素选择器，匹配页面所有元素；
#id id选择器，匹配特定id的元素；
.class 类选择器，匹配class包含（不是等于）特定类的元素；
element 标签选择器，匹配相同的标签。

组合选择器

E,F 多元素选择器，用,分隔，同时匹配元素E和元素F；
E F 后代选择器，用空格分隔，匹配E元素所有的后代元素F；
E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素F；
E+F 直接相邻选择器，匹配E元素之后相邻的同级元素F；
E~F 普通相邻选择器，匹配E元素之后所有的同级元素F（无论直接相邻与否）；
.class1.class2 匹配同时有class1和class2的元素，class1和class2直接没有分隔；
element#id 匹配具有id的element元素；

属性选择器

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

伪类选择器

E:first-child 匹配元素E的第一个子元素；
E:link 匹配所有未被点击的链接；
E:visited 匹配所有已被点击的链接；
E:active 匹配鼠标已经点下，还没释放的链接；
E:hover 匹配鼠标悬停在上面的E元素；
E:focus 匹配获得当前焦点的E元素；
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素；
E:disabled 匹配表单中禁用的元素；
E:checked 匹配表单中被选中的radio或checkbox元素；
E::selection 匹配用户当前选中的元素；
E:nth-child(n) 匹配E元素的父元素的第n个子元素，从1开始计数，若该元素不是E元素，则不选择；
E:nth-last-child(n) 匹配E元素的父元素倒数第n个子元素，从1开始计数，若该元素不是E元素，则不选择；
E:nth-of-type(n) 匹配E元素的父元素的第n个E子元素，从1开始计数，且只计算E元素；
E:nth-last-of-type(n) 匹配E元素的父元素倒数的第n个E子元素，从1开始计数，且只计算E元素；
E:first-child 匹配E元素的父元素的第一个元素，若该元素不是E元素，则不选择，等同于E:nth-child(1)；
E:last-child 匹配E元素的父元素倒数的第一个元素，若该元素不是E元素，则不选择，等同于E:nth-last-child(1)；
E:first-of-type 等同于E:nth-of-type(1)
E:last-of-type E:nth-last-of-type(1)
E:only-child 匹配其父元素下仅有E这一个元素的E元素；
E:only-of-type 匹配其父元素下仅有E这一个元素的标签的E元素；
E::first-line 匹配E元素内容的第一行；
E::first-letter 匹配E元素内容的第一个字母；
E::before 在E元素之前插入生成的内容；

<q>一些引用</q>, 他说, <q>比没有好。</q>.

q::before { 
  content: "«";
  color: blue;
}

E::after 在E元素之后插入生成的内容；

<q>一些引用</q>, 他说, <q>比没有好。</q>.

q::after { 
  content: "»";
  color: red;
}

三、选择器的优先级

从高到低分别是：

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

复杂场景下的比较

通过比较标签数，先比较最高优先级的标签数，数量多的优先级高，若最高优先级的标签数相同，比较次一级的标签数，以此类推。

四、a:link, a:hover, a:active, a:visited的顺序

这四个选择器优先级相同，考虑到a:visited靠下面的话，会覆盖上面的a:hover, a:active，因此，合理的顺序如下：

a:link{}
a:visited{}
a:hover{}
a:active{}

五、以下选择器分别是什么意思？

#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的元素*/

六、:first-child和:first-of-type

E:first-child 匹配E元素的父元素的第一个元素，若该元素不是E元素，则不选择；
E:first-of-type 匹配E元素的父元素的第一个E子元素；

七、解析下面代码

<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>

.item1:first-child{color: red;} 选择了其父元素第一个class为item的子元素，并将其颜色定为红色，因此aa显示为红色；
.item1:first-of-type{background: blue;} 选择了其父元素下不同标签中第一个class为item的子元素，并将其背景颜色定为蓝色，因此p标签和h3标签的第一个元素的背景色为蓝色。

CSS：选择器

一、class与id的使用场景

二、CSS常见选择器

基础选择器

组合选择器

属性选择器

伪类选择器

三、选择器的优先级

从高到低分别是：

复杂场景下的比较

四、a:link, a:hover, a:active, a:visited的顺序

五、以下选择器分别是什么意思？

六、:first-child和:first-of-type

七、解析下面代码

推荐阅读更多精彩内容