CSS学习笔记（十）CSS 组合器，伪类，伪元素

最新推荐文章于 2022-10-09 19:27:12 发布

〔晴【天】º〕

最新推荐文章于 2022-10-09 19:27:12 发布

阅读量193

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_43625134/article/details/116979555

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

CSS 组合器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

下面的例子选择 <div> 元素内的所有 <p> 元素：（包含在里面的所有p元素）

实例

div p {
  background-color: yellow;
}

子选择器

子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：（只包含子类的p元素）

实例

div > p {
  background-color: yellow;
}

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：（同级且紧随其后）

实例

div + p {
  background-color: yellow;
}

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：（同级的所有p元素）

实例

div ~ p {
  background-color: yellow;
}

CSS 伪类

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

语法

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类

链接能够以不同的方式显示：

实例

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

详细参照css链接CSS学习笔记（七）

伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

实例

a.highlight:hover {
  color: #ff0000;
}

悬停在 `<div>` 上

在 <div> 元素上使用 :hover 伪类的实例：

实例

div:hover {
  background-color: blue;
}

简单的工具提示悬停

把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）：

实例
（鼠标悬停在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> 元素中的第一个元素：

实例

p i:first-child {
  color: blue;
}

匹配所有首个 `<p>` 元素中的所有 `<i>` 元素

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

实例

p:first-child i {
  color: blue;
}

CSS - :lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang="en" 的 <q> 元素定义引号：

实例

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

结果：
在这里插入图片描述
所有 CSS 伪类：标准伪类索引

CSS 伪元素

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

语法

伪元素的语法：

selector::pseudo-element {
  property: value;
}

`::first-line` 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

下面的例子为所有 <p> 元素中的首行添加样式：

实例

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

`::first-letter` 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

下面的例子设置所有 <p> 元素中文本的首字母格式：

实例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 "float" 为 "none"）
text-transform
line-height
float
clear

伪元素和 CSS 类

伪元素可以与 CSS 类结合使用：

实例

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

上面的例子将以红色和较大的字体显示 class=“intro” 的段落的首字母。

多个伪元素

也可以组合几个伪元素。

在下面的例子中，段落的第一个字母将是红色，字体大小为 xx-large。第一行的其余部分将变为蓝色，并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色：

实例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS - `::before` 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

下面的例子在每个 <h1> 元素的内容之前插入一幅图像：

实例

h1::before {
  content: url(smiley.gif);
}

CSS - `::after` 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

下面的例子在每个 <h1> 元素的内容之后插入一幅图像：

实例

h1::after {
  content: url(smiley.gif);
}

CSS - `::selection` 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

color
background
cursor
outline

下例使所选文本在黄色背景上显示为红色：
（指的是你的鼠标选中的部分）
实例

::selection {
  color: red; 
  background: yellow;
}

所有 CSS 伪元素：标准伪元素索引

〔晴【天】º〕

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS学习笔记（十）CSS 组合器，伪类，伪元素

CSS 组合器CSS 组合器组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。CSS 中有四种不同的组合器：后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)通用兄弟选择器 (~)后代选择器后代选择器匹配属于指定元素后代的所有元素。下面的例子选择 <div> 元素内的所有 <p> 元素：（包含在里面的所有p元素）实例div p { background-color: ye
复制链接

扫一扫