当前位置：首页 > news >正文

CSS 第四天复合选择器、CSS特性、背景属性、显示模式

news 2025/6/16 7:35:51

1 复合选择器

定义：由两个或多个基础选择器通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）

1.1 后代选择器

后代选择器：会同时选中某元素的所有后代元素
后代选择器写法：父选择器子选择器 { CSS 属性 }，父子选择器之间用空格隔开。

1.2 子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。
选择器写法：父选择器 > 子选择器器{CSS属性}，父子选择器之间用 > 隔开。

1.3 并集选择器

并集选择器：选中多组标签设置相同的样式。
选择器写法：选择器1，选择器2，.,选择器N{CSS属性}，选择器之间用，隔开。

1.4 交集选择器了解

交集选择器：选中同时满足多个条件的元素。
选择器写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号。

1.5 伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover{CSS属性}

例如：鼠标划过的状态

1.5.1 伪类 - 超链接一般不用

超链接一共有四个状态：

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

注意：工作中，一般就只写 a { CSS 属性}，以及 a:hover{ CSS 属性

2 CSS 三大特性

2.1 继承性

继承性：子级默认继承父级的文字控制属性
注意：当标签有自己的样式，就不会继承父级的

一般会在 body 标签中统一设置，对于特殊的字体再单独写

2.2 层叠性

相同的属性会覆盖：后面的 CSS 属性覆盖前面的CSS属性
不同的属性会叠加：不同的 CSS 属性都生效

2.3 优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
在属性后边加 !important 是直接提高到最高优先级慎用！

比如：

规则：选择器优先级高的样式生效
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
选中标签的范围越大，优先级越低

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性：优先级</title><style>/* 通配符选择器 */* {color: red !important;       /*  在属性后边加 !important 是直接提高到最高优先级 */}/* 标签选择器 */div {color: green;}/* 类选择器 */.box {color: blue;}/* id 选择器 */#test {color: orange;}</style>
</head>
<body><!-- 行内样式：style="color:purple" --><div class="box" id="test" style="color:purple">div 标签</div>
</body>
</html>