一、class与id的使用场景
- class
类选择器，匹配class包含特定类的元素，可以管控多个含有相同类的元素； - id
id选择器，匹配特定id的元素，id是唯一的。
二、CSS常见选择器
基础选择器
-
#通用元素选择器，匹配页面所有元素； -
#idid选择器，匹配特定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-typeE: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标签的第一个元素的背景色为蓝色。
