06.CSS选择器

CSS选择器

1.选择器的优先级

介绍

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突

到底应用哪个样式，此时就需要看优先级了

简单描述

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

2.判断选择器是否选中目标标签

3.CSS基本选择器

总览

1. 通配选择器
2. 元素选择器
3. 类选择器
4. id 选择器

通配选择器

作用

可以选中所有的 HTML 元素

语法

* {
    属性名:属性值;
}

备注

目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助

元素选择器

作用

为页面中 某种元素 统一设置样式

语法

标签名 {
    属性名:属性值;
}

备注

元素选择器无法实现差异化设置

类选择器

作用

根据元素的 class 值，来选中某些元素

语法

.类名 {
    属性名:属性值;
}

class命名规范

• 不要使用纯数字
• 不要使用中文
• 尽量使用英文与数字的组合
• 若由多个单词组成，使用 - 做连接

注意点

1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 .
2. 一个元素不能写多个 class 属性
3. 一个元素的 class 属性，能写多个值，要用空格隔开

id选择器

作用

根据元素的 id 属性值，来精准的选中某个元素

语法

#id值 {
    属性名: 属性值;
}

id属性值命名规范

• 尽量由字母、数字、下划线( _ )、短杠( - )组成
• 最好以字母开头、不要包含空格、区分大小写

注意

• 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同
• 一个元素可以同时拥有 id 和 class 属性

基本选择器总结

4.CSS复合选择器

总览

• 交集选择器
• 并集选择器
• 后代选择器
• 子元素选择器

介绍

• 复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成
• 复合选择器可以在复杂结构中，快速而准确的选中元素

交集选择器

作用

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

语法

选择器1选择器2选择器3...选择器n {}

举例

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
    color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
    color: green;
}

注意

• 有标签名，标签名必须写在前面
• id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用，因为没有意义
• 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素
• 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty

并集选择器

作用

选中多个选择器对应的元素，又称：分组选择器

语法

选择器1, 选择器2, 选择器3, ... 选择器n {}

举例

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

注意

1. 并集选择器，我们一般竖着写
2. 任何形式的选择器，都可以作为并集选择器的一部分
3. 并集选择器，通常用于集体声明，可以缩小样式表体积

后代选择器

作用

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

语法

选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）

举例

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

注意

• 选择器之间，用空格隔开，空格可以理解为：" xxx 中的"，其实就是后代的意思
• 选择器 1234…n ，可以是我们之前学的任何一种选择器
• 后代选择器，最终选择的是后代，不选中祖先
• 儿子、孙子、重孙子，都算是后代
• 结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6

子代选择器

作用

选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

语法

选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

举例

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

注意

• 子代选择器，最终选择的是子代，不是父级
• 子、孙子、重孙子、重重孙子 … 统称后代！，子就是指儿子

兄弟选择器

作用

选中指定元素后，符合条件的相邻兄弟元素

所谓相邻，就是紧挨着他的下一个

语法

选择器1+选择器2 {}

示例

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

通用兄弟选择器

作用

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

语法

选择器1~选择器2 {}

示例

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

属性选择器

作用

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

语法

• [属性名] 选中具有某个属性的元素
• [属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素
• [属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素
• [属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素
• [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素

举例

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

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

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

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

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

伪类选择器

介绍

选中特殊状态的元素

举例使用

<style>
    /* 注意：CSS编写顺序对效果有影响，可能会产生编写的效果不生效的问题 */

    /* 选中的是没有访问过的a元素 */
    a:link {
        color: red;
    }
    /* 选中的是访问过的a元素 */
    a:visited {
        color: red;
    }
</style>

常用的动态伪类选择器

• :link：超链接未被访问的状态
• :visited：超链接访问过的状态
• :hover：鼠标悬停在元素上的状态
• :active：元素激活状态
• :focus：获取焦点的元素

常用的结构伪类选择器

• :first-child：所有兄弟元素中的第一个
• :last-child：所有兄弟元素中的最后一个
• :nth-child(n)：所有兄弟元素中的第 n 个
• :first-of-type：所有同类型兄弟元素中的第一个
• :last-of-type：所有同类型兄弟元素中的最后一个
• :nth-of-type(n)：所有同类型兄弟元素中的第 n 个
• 关于 n 的值：
  • 0 或 不写：什么都选不中（几乎不用）
  • n：选中所有子元素（几乎不用）
  • 1~正无穷的整数：选中对应序号的子元素
  • 2n 或 even：选中序号为偶数的子元素
  • 2n+1 或 odd：选中序号为奇数的子元素
  • -n+3：选中的是前 3 个

需要了解的伪类选择器

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

否定伪类

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

UI伪类

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

目标伪类

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

语言伪类

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

伪元素选择器

作用

选中元素中的一些特殊位置

常用的伪元素

• ::first-letter：选中元素中的第一个文字
• ::first-line：选中元素中的第一个文字
• ::selection：选中被鼠标选中的内容
• ::placeholder：选中输入框的提示文字
• ::before：在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
• ::after：在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）