1.class 和 id 的使用场景
-可以为任意多个元素指定同一个类，但一个ID选择器只能使用一次。因此在要重复使用某样式时为元素指定类，而一个特殊的样式应该使用ID选择器。
-不同于类选择器，ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。
-ID选择器的优先级要比类选择器更高。
2.CSS常见选择器（以选择器类型划分）
Simple selectors
- 元素选择器
- 类选择器（
.） - ID选择器（
#） - 通配选择器（
*）
Attribute selectors
- 匹配属性值选择器
// 有attr属性的元素
[attr]
// attr属性值为val的元素
[attr = val]
// 包含值为val的attr属性的元素
[attr ~= val]
- 正则选择器
// attr属性值为val或以val开头的元素
[attr |= val]
// attr属性值以val开头的元素
[attr ^= val]
// attr属性值以val结尾的元素
[attr $= val]
// attr属性值包含子串val的元素
[attr *= val]
Pseudo
- 伪类选择器
:link, :visited, :focus, :hover, :active
:first-child, :first-of-type, :last-child, :last-of-type, :nth-child(), :nth-of-type(), :nth-last-child(), :nth-last-of-type(), :only-child, :only-of-type
:not()
:checked, :disabled, :enabled, :required, :optional, :valid, :invalid
:target
- 伪元素选择器
::before, ::after
::first-letter, ::first-line
::selection
Combinators and Multiple selectors
- 结合符
// 同时匹配
AB
// 匹配A的后代B
A B
// 匹配A的直接后代B
A>B
// 匹配A后的相邻的兄弟元素B
A+B
// 匹配A后的所有的兄弟元素B
A~B
- 多重选择器（
,）
3.择器的优先级
层叠规则：
- !important标志的规则。
- 内联样式。
- 0，0，0，1：
元素（h1）和伪元素（::before） - 0，0，1，0：
类选择器，属性选择器（[type=“radio”]）和伪类（:hover） - 0，1，0，0：
ID选择器
Note：
通配选择器*，结合符（+,>,~,），否定伪类（:not()）对优先级没有影响。
4.a:link, a:hover, a:active, a:visited 的顺序
a:link > a:visited > a:fovus > a.hover > a.active
以上选择器的优先级别相同，后面的样式会覆盖前面的样式。
正在“点击”的“未访问”链接可同时与:link, :hover, :active匹配，所以:active要放到最后。其他同理。
5.
/*ID为header的元素*/
#header{
}
/*类名为header的元素*/
.header{
}
/*类名为logo，且祖先类名为header的所有元素*/
.header .logo{
}
/*类名同时有header和mobile的元素*/
.header.mobile{
}
/*祖先类名为header的p元素和h3元素 */
.header p, .header h3{
}
/*所有li元素，且父类名为nav，且祖先ID为header*/
#header .nav>li{
}
/*所有悬停的a元素，且祖先ID为header*/
#header a:hover{
}
/*所有类名为logo的元素后的兄弟元素p元素，且祖先ID为header*/
#header .logo~p{
}
/*所有type属性为text的input元素，且祖先ID为header*/
#header input[type="text"]{
}
- 伪类选择器见题2
- div:first-child和div:first-of-type的作用和区别
div:first-child：作为某元素第一个子元素的所有div元素
div:first-of-type：作为某元素子元素的所有第一个div元素
<style>
/*将div下第一个类名为item1的元素字体设为红色*/
.item1:first-child{
color: red;
}
/*将div下同一类标签的第一个元素背景设为blue*/
.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>
