CSS 的常用选择器有: 通用选择器 * , id选择器 # , 类选择器 . , 元素选择器, 后代选择器, 兄弟选择器和伪类选择器等。其中，伪类选择器主要是带有 : 或者 :: 的选择器，现在，总结下CSS中选择器。
通用选择器 *
选择所有的元素。
id选择器 #
通过 id 选择元素。
类选择器 .
通过类名选择元素。
元素选择器
通过元素名选择元素。
后代选择器 X Y
选择父代元素 X 的子代元素 Y。
子选择器 X > Y
选择父代元素 X 的子代元素 Y。
直接兄弟选择器 X + Y
选择元素 X 后的第一个兄弟节点元素 Y。
兄弟选择器 X ～Y
选择元素 X 后的所有类型为 Y 的兄弟节点元素。
通过属性筛选获取元素 [attr]
- [attr]：选择器中包含attr属性的选择器。比如：div[title]。
- [attr = value]： 选择器中包含 attr 属性，且该属性的值为 value。比如：div[title=app]。
- [attr |= value]： 选择器中包含 attr 属性，且该属性的值刚好为 value 或者 value- 开头。
- [attr ^= value]：选择器中包含 attr 属性，且该属性的值以 value 开头。
- [attr $= value]：选择器中包含 attr 属性，且该属性的值以 value 结尾。
- [attr ~= value]：选择器中包含 attr 属性，且该属性的属性值以空格分开，其中刚好有一个 value 值。
伪类选择器
:nth-child(n)
从 前面 开始，选择父标签里面的第 n 个标签，n 从 1 开始。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
ul :nth-child(1){
color: blue;
}
ul :nth-child(2){
font-size: 25px;
}
image1.png
n 也可以是一个表达式，比如：选择偶数标签 2n，奇数标签 2n + 1。
ul :nth-child(2n + 1) {
color: green;
font-size: 22px;
}
ul :nth-child(2n) {
color: aqua;
}
image2.png
nth-last-child(n)
从 后面 开始，选择父标签里面的第 n 个标签，n 从 1 开始。
ul :nth-last-child(1){
color: blue;
}
ul :nth-last-child(2){
font-size: 25px;
color: green;
}
image3.png
X:first-child and X:last-child
父亲节点的第一个 / 最后一个元素，如果指定了X标签，这个X标签就必须是父级标签的第一 / 最后一个标签 的标签名。当然，也可以不指定X标签。
ul :first-child{
color: blue;
}
ul :last-child{
color: green;
}
image4.png
X:nth-of-type(n)
选择父节点下子节点类型 X 元素中（从前面开始），第 n 个 X 元素；并且，n 可以是一个表达式，比如偶数奇数。
<div>
<strong>1</strong>
<i>2</i>
<strong>1</strong>
<small>3</small>
<strong>1</strong>
<strong>1</strong>
</div>
div strong:nth-of-type(4){
font-size: 40px;
}
image5.png
即：选择 div 元素下的 strong 元素，并且是 strong 元素中的第 4 个。
X:nth-last-of-type(n)
选择父节点下子节点类型 X 元素中（从后面开始），第 n 个 X 元素；并且，n 可以是一个表达式，比如偶数奇数。
X:first-child
选择父节点下子节点类型 X 元素中的第一个节点。
X:last-child
选择父节点下子节点类型 X 元素中的最后一个节点。
