web前端css学习笔记(2)——选择器

目录

        前言

        一、CSS选择器

        1.通配选择器

        2.元素选择器

        3.类选择器

        4.ID选择器

        二、复合选择器

        1.交集选择器

        2.并集选择器

        3.后代选择器

        4.子代选择器

        5.兄弟选择器

        6.属性选择器

        总结

---

前言

本篇学习CSS选择器，内容比较复杂易混。

---

一、CSS选择器

1.通配选择器

可以选中所有的 HTML 元素，一般用于清除样式

* {

        属性名: 属性值;

}

2.元素选择器

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

h1 {
    color: orange;
    font-size: 40px;
}

p {
    color: blue;
    font-size: 60px;
}

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

3.类选择器

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

.类名 {

        属性名: 属性值;

}

/* 选中所有class值为speak的元素 */
.speak {
    color: red;
}

class 值，按照标准：

        不要使用纯数字，不要使用中文，尽量使用英文与数字的组合

        若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名要有意义，做到见名知意。

一个元素不能写多个 class 属性，而是 class 属性能写多个值，要用空格隔开

<h1 class="speak big">你好</h1>

4.ID选择器

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

#id值 {

        属性名: 属性值;

}

/* 选中id值为earthy的那个元素 */
#eat {
    color: red;
    font-size: 60px;
}

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

 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同

 一个元素可以同时拥有 id 和 class 属性

二、复合选择器

1.交集选择器

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

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

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

有标签名，标签名必须写在前面

id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义

交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span元素

用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty

2.并集选择器

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

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

并集选择器一般竖着写，用逗号隔开。并集选择器，通常用于集体声明，可以缩小样式表体积

任何形式的选择器，都可以作为并集选择器的一部分

HTML元素间的关系

父元素：直接包裹某个元素的元素，就是该元素的父元素

子元素：被父元素直接包含的元素

祖先元素：父亲的父亲.......，一直往外找，都是祖先

        父元素，也算是祖先元素的一种

后代元素：儿子的儿子......，一直往里找，都是后代

        子元素，也算是后代元素的一种

兄弟元素：具有相同父元素的元素，互为兄弟元素

3.后代选择器

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

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

选择器之间，用空格隔开

选择器 1 2 3 4...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;
}

后代选择器，最终选择的是后代，不选中祖先

        儿子、孙子、重孙子，都算是后代

结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 在 p 中写 h1 ~ h6

4.子代选择器

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

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

选择器之间，用 > 隔开

选择器 1 2 3 4...n ，可以是上面学的任何一种选择器

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

子代选择器，最终选择的是子代，不是父级

        子、孙子、重孙子、重重孙子......统称后代

5.兄弟选择器

选中指定元素后符合条件的紧紧相邻（只向下看）兄弟元素

相邻兄弟选择器

选择器1+选择器2 {}

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

通用兄弟选择器

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

选择器1~选择器2 {}

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

6.属性选择器

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

[属性名] 选中具有某个属性的元素

[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素

[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素

[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素

[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素

[title="dd"] {
    color:red;
}

---

总结

本篇学习CSS选择器：通配选择器，元素原则器，类选择器，ID选择器；通过不同的组合我们得到交集选择器、并集选择器、后代选择器、子代选择器、兄弟选择器和属性选择器。伪类选择器将单独放到下篇笔记中。

根据尚硅谷张天禹老师2023年的前端基础视频整理而成。