文章目录
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组合器和伪类使用,如有问题欢迎私信和评论