文章目录
CSS 组合器
组合器是解释选择器之间关系的东西。
CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器：
- 后代选择器（空格）
- 子选择器（>）
- 相邻兄弟选择器（+）
- 一般兄弟选择器（~）
后代选择器
后代选择器匹配指定元素的所有后代元素。
以下示例选择 <div> 元素内的所有 <p> 元素：
示例
div p {
background-color: yellow;
}
子选择器（>）
子选择器选择指定元素的所有子元素。
以下示例选择 <div> 元素的所有子元素：
示例
div > p {
background-color: yellow;
}
相邻兄弟选择器 (+)
相邻兄弟选择器用于选择紧跟在另一个特定元素之后的元素。
兄弟元素必须具有相同的父元素，“相邻”表示“紧跟”。
以下示例选择紧跟在 <div> 元素之后的第一个 <p> 元素：
示例
div + p {
background-color: yellow;
}
通用兄弟选择器 (~)
通用兄弟选择器选择指定元素的下一个兄弟元素。
以下示例选择 <div> 元素的下一个兄弟元素的所有 <p> 元素：
示例
div ~ p {
background-color: yellow;
}
什么是伪类？
伪类用于定义元素的特殊状态。
例如，它可用于：
- 当用户将鼠标悬停在元素上时设置元素的样式
- 对已访问和未访问的链接设置不同的样式
- 当元素获得焦点时设置元素的样式
伪类的语法：
selector:pseudo-class {
property: value;
}
锚点伪类
链接可以以不同的方式显示：
示例
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停在链接上 */
a:hover {
color: #FF00FF;
}
/* 选定的链接 */
a:active {
color: #0000FF;
}
注意：CSS 定义中 a:hover 必须位于 a:link 和 a:visited 之后才能生效！CSS 定义中 a:active 必须位于 a:hover 之后才能生效！伪类名称不区分大小写。
伪类和 HTML 类
伪类可以与 HTML 类结合使用：
示例
a.highlight:hover {
color: #ff0000;
}
悬停在 <div> 上
在 <div> 元素上使用 :hover 伪类的示例：
示例
div:hover {
background-color: blue;
}
简单工具提示悬停
将鼠标悬停在 <div> 元素上以显示 <p> 元素（类似于工具提示）：
示例
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS - :first-child 伪类
:first-child 伪类匹配作为另一个元素的第一个子元素的指定元素。
匹配第一个 <p> 元素
在以下示例中，选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：
示例
p:first-child {
color: blue;
}
匹配所有 <p> 元素中的第一个 <i> 元素
在以下示例中，选择器匹配所有 <p> 元素中的第一个<i> 元素：
示例
p i:first-child {
color: blue;
}
匹配所有第一个子 <p> 元素中的所有 <i> 元素
在以下示例中，选择器匹配另一个元素的第一个子元素 <p> 元素中的所有 <i> 元素：
示例
p:first-child i {
color: blue;
}
CSS - :lang 伪类
:lang 伪类允许您为不同语言定义特殊规则。
在下面的示例中，:lang 为带有 lang=“no” 的 元素定义引号：
示例
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>一些文本 <q lang="no">段落中的引号</q> 一些文本。</p>
</body>
</html>
总结
本文介绍了的CSS组合器和伪类使用，如有问题欢迎私信和评论
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
