06.CSS选择器

CSS选择器

1.选择器的优先级

介绍

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

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

简单描述

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

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

3.CSS基本选择器

总览

通配选择器
元素选择器
类选择器
id 选择器

通配选择器

作用

可以选中所有的 HTML 元素

语法

* {
    属性名:属性值;
}

备注

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

元素选择器

作用

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

语法

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

备注

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

类选择器

作用

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

语法

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

class命名规范

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

注意点

元素的 class 属性值不带 . ，但 CSS 的类选择器要带 .
一个元素不能写多个 class 属性
一个元素的 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 ...... 选择器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 个