CSS的选择器

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 元素中的最后一个节点。