CSS选择器

通配选择器

选择所有html元素

语法：

* {
    color: red;
}

标签选择器

选择所有相应标签

如：<div>标签

div {
    width: 200px;
    height: 200px;
    background-color: red;
}

类选择器

根据元素的 class 值，来选中某些元素
如：选择所有container类的标签

.container {
    width: 200px;
    height: 200px;
    background-color: red;
}

注意：

• 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 .

• class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如：left-menu，且命名要有意义，做到 “见名知意”

• 一个元素不能写多个 class 属性，下面是 错误示例 ：

!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
<h1 class="container" class="big">你好</h1>

• 一个元素的 class 属性，能写多个值，要用空格隔开，例如：

<!-- 该写法正确，class属性，能写多个值 -->
<h1 class="container big">你好啊</h1>

ID选择器

根据元素的 id 属性值，来精准的选中某个元素
如：选择ID为container的标签

#container {
    width: 200px;
    height: 200px;
    background-color: red;
}

注意：

• id属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空格、区分大小写
• 一个元素只能拥有一个id属性，多个元素的id属性值不能相同
• 一个元素可以同时拥有id和class属性

复合选择器

由两个及以上基础选择器组合而成的选择器

交集选择器

选中同时符合多个条件的元素

示例：

/* 选中类名为container的div元素 */
div.container {
    color: red;
}
/* 选中类名包含container和card的元素 */
.container.card {
    color: red;
}

并集选择器

选中多个选择器对应的元素

示例：

/* 选中id为card，或类名为container，或类名为text的元素 */
#card,
.container,
.text {
    font-size: 40px;
    background-color: skyblue;
    width: 200px;
}

后代选择器

选中指定元素中，符合要求的后代元素

示例：

/* 选中ul中的所有li */
ul li {
    color: red;
}
/* 选中ul中所有li中的a */
ul li a {
    color: orange;
}
/* 选中类名为container元素中的所有li */
.container li {
    color: blue;
}
/* 选中类名为container元素中的所有类名为text的li */
.container li.text {
    color: blue;
}

注意：最后的样式表现在后代

子代选择器

选中指定元素中，符合要求的子元素

示例：

/* div中的子代a元素 */
div > a {
    color: red;
}
/* 类名为container的元素中的子代a元素 */
.container > a {
    color: red;
}

注意：最后的样式表现在子代

兄弟选择器

相邻兄弟选择器

选中指定元素后，符合条件的相邻兄弟元素，即指定元素紧挨着他的下一个

示例：

/* 选中div后相邻的兄弟p元素 */
div+p {
    color:red;
}

通用兄弟选择器

选中指定元素后，符合条件的所有兄弟元素

示例：

/* 选中div后的所有的兄弟p元素 */
div~p {
    color:red;
}

注意：都是指定该元素后面的兄弟

属性选择器

选中属性值符合一定要求的元素

示例：

/* 选中具有title属性的元素 */
div[title] {
    color:red;
}

/* 选中title属性值为container的元素 */
div[title="container"] {
    color:red;
}

/* 选中title属性值以ab开头的元素 */
div[title^="ab"] {
    color:red;
}

/* 选中title属性值以xy结尾的元素 */
div[title$="xy"] {
    color:red;
}

/* 选中title属性值包含theme的元素 */
div[title*="theme"] {
    color:red;
}

伪类选择器

用于定义元素的特殊状态

动态伪类

• :link：链接访问前的状态
• :visited：链接访问后的状态
• :hover：鼠标悬停时的状态
• :active：鼠标点击后长按时的状态

必须遵循以上顺序书写

• :focus：获取焦点的元素

结构伪类

常用：

• :first-child：所有兄弟元素中的第一个
• :last-child：所有兄弟元素中的最后一个
• :nth-child(n)：所有兄弟元素中的第n个
• :first-of-type：所有同类型兄弟元素中的第一个
• :last-of-type：所有同类型兄弟元素中的最后一个
• :nth-of-type(n)：所有同类型兄弟元素中的第n个

不常用：

• :nth-last-child(n)：所有兄弟元素中的倒数第 n 个
• :nth-last-of-type(n)：所有同类型兄弟元素中的 倒数第n个 。
• :only-child：选择没有兄弟的元素（独生子女）
• :only-of-type：选择没有同类型兄弟的元素
• :root：根元素
• :empty：内容为空元素（空格也算内容）

（上述括号内可以写成An+B的表达式）

否定伪类

• :not(选择器)：排除满足括号中条件的元素

UI伪类

• :checked：被选中的复选框或单选按钮
• :enable：可用的表单元素（没有 disabled 属性）
• :disabled：不可用的表单元素（有 disabled 属性）

目标伪类

• :target：选中锚点指向的元素

语言伪类

• :lang()：根据指定的语言选择元素（本质是看 lang 属性的值）

目标伪类选择器：

• :target：当url指向该元素时生效。

伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

• ::first-letter：选择第一个字母
• ::first-line：选择第一行
• ::selection：选择已被选中的内容
• ::after：可以在元素后插入内容
• ::before：可以在元素前插入内容

---

样式渲染优先级

• 权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
• 权重相同时，后面的样式会覆盖前面的样式
• 继承自父元素的权重最低