CSS选择器

长存祈月心

已于 2024-07-15 23:27:26 修改

阅读量548

点赞数 29

分类专栏：前端基础文章标签： css 前端

于 2024-07-15 23:20:50 首次发布

本文链接：https://blog.csdn.net/lvshihao_/article/details/140450992

版权

前端基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.CSS基本选择器

1. 通配选择器

2. 元素选择器

3. 类选择器

4. id 选择器

1.1通配选择器

作用：可以选中所有的 HTML 元素。

* {
    属性名: 属性值;
}

备注：可用于清除样式

1.2 元素选择器

作用：为页面中 某种元素 统一设置样式。

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

/* 选中所有div元素 */
div {
    color: orange;
    font-size: 40px;
}
/* 选中所有p元素 */
p {
    color: blue;
    font-size: 60px;
}

备注：元素选择器无法实现 差异化设置 ，例如上面的代码中，所有的 p 元素效果都一样。

1.3 类选择器

作用：根据元素的 class 值，来选中某些元素。（ class 翻译过来有：种类、类别的含义，所以 class 值，又称：类名。）

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

/* 选中所有class值为uname的元素 */
.uname {
color: orange;
}
/* 选中所有class值为age的元素 */
.age {
color: blue;
}

注意点：

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

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

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

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

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

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

1.4 ID选择器

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

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

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

注意：

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

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

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

2. CSS复合选择器

CSS 选择器整体分类两大类：

一、基本选择器：

①通配选择器

②元素选择器

③类选择器

④ ID 选择器

二、复合选择器：

①交集选择器

②并集选择器

③后代选择器

④子元素选择器

.....

1. 复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。

2. 复合选择器可以在复杂结构中，快速而准确的选中元素。

2.1 交集选择器

作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即......又...... 的意思） 。

/* 选中：类名为beauty的p元素 */
p.beauty {
    color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
    color: green;
}

注意：

1. 有标签名，标签名必须写在前面。

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

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

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

2.2 并集选择器

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

所谓并集就是或者的含义（通俗理解：要么......要么...... 的意思） 。

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

多个选择器通过 , 连接，此处 , 的含义就是：或。

注意：

1. 并集选择器，我们一般竖着写。

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

3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

2.3 HTML元素间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

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

2. 子元素：被父元素直接包含的元素（简记：儿子元素）。

3. 祖先元素：父亲的父亲 ......，一直往外找，都是祖先。( 备注：父元素，也算是祖先元素的一种。)

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

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

2.4 后代选择器

作用：选中指定元素中，符合要求的后代元素。

/* 选中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;
}

注意：

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

2. 儿子、孙子、重孙子，都算是后代。

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

2.5 子代选择器

作用：选中指定元素中，符合要求的子元素（ 儿子元素）。（子代选择器又称：子元素选择器、子选择器。）

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

选择器之间，用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。

注意：

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

2. 子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

2.6 兄弟选择器

相邻兄弟选择器：

作用：选中指定元素后，符合条件的 相邻兄弟元素。( 所谓相邻，就是 紧挨着 他的下一个 )

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

通用兄弟选择器：

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

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

注意：两种兄弟选择器，选择的是下面的兄弟，上面的兄弟选不到。

2.7 属性选择器

作用：选中属性值符合一定要求的元素。

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

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

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

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

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

/* 选中具有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;
}