CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器

ordinary90

已于 2023-10-14 20:20:13 修改

阅读量2.7k

点赞数 4

分类专栏：前端全栈开发文章标签： css3 css 前端

于 2023-10-14 20:18:49 首次发布

本文链接：https://blog.csdn.net/zxcv321zxcv/article/details/133829520

版权

前端全栈开发专栏收录该内容

152 篇文章 0 订阅

订阅专栏

一、子级选择器

CSS3 子级选择器是一种选择器，可以用来选择指定元素的直接子元素。它是通过 “>” 符号来实现的。

语法格式如下：

父级元素 > 子级元素 {
    /* 属性值 */
}

其中，父级元素是要选择的元素的直接父元素，子级元素是要选择的元素。

下面是一个例子，选择所有 class 为 "list" 的直接子元素 li：

ul.list > li {
    /* 属性值 */
}

再来看一个例子，选择所有 class 为 "container" 的直接子元素 div：

<div class="container">
    <div>选择我</div>
    <p>不选择我</p>
    <div>选择我</div>
</div>

.container > div {
    /* 属性值 */
}

在上面的例子中，只有两个 div 元素会被选择，而 p 元素则不会被选择，因为它不是直接的子元素。

除了直接子元素，CSS3 还提供了其他类型的选择器，如后代选择器和相邻兄弟选择器。这些选择器可以更具体地选择元素，具有更广泛的适用性。

下面是一个完整的例子，可以更好地理解子级选择器的用法：

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 子级选择器</title>
	<style type="text/css">
		ul > li {
			color: red;
		}
	</style>
</head>
<body>
	<ul>
		<li>苹果</li>
		<li>香蕉</li>
		<li>橙子</li>
		<li>
			桃子
			<ul>
				<li>红桃</li>
				<li>黄桃</li>
			</ul>
		</li>
	</ul>
</body>
</html>

在上面的例子中，所有 class 为 "list" 的直接子元素 li 都会被选择，并设置为红色。如果需要选择所有 li 元素，则使用后代选择器 ul li。

二、兄弟选择器

CSS3 兄弟选择器是一种选择器，可以用来选择指定元素的同级兄弟元素。它是通过 ~ 或 + 符号来实现的。

"~" 符号表示选择所有指定元素之后的兄弟元素，包括它自己。
"+" 符号表示选择紧接在指定元素之后的兄弟元素，不包括它自己。

语法格式如下：

/* 选择所有指定元素之后的兄弟元素 */
元素 ~ 兄弟元素 {
    /* 属性值 */
}
/* 选择紧接在指定元素之后的兄弟元素 */
元素 + 兄弟元素 {
    /* 属性值 */
}

下面是一个例子，选择紧接在 class 为 "box" 的 div 元素后面的所有 p 元素：

<div class="box"></div>
<p>选中</p>
<p>选中</p>
<p>不选中</p>

.box + p {
    color: red;
}

在上面的例子中，只有前两个 p 元素会被选择，而最后一个则不会被选择。

再来看一个例子，选择所有 class 为 "item" 的 div 元素之后的所有 h3 元素：

<div class="container">
    <div class="item"></div>
    <h3>选中</h3>
    <p>不选中</p>
    <h3>选中</h3>
    <h3>选中</h3>
    <div class="item"></div>
    <h3>选中</h3>
</div>

.item ~ h3 {
    color: red;
}

在上面的例子中，除了第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外，其它的 h3 元素都会被选择。

需要注意的是，CSS3 兄弟选择器只能选择同级兄弟元素，不能选择父元素或子元素。若需要选择其他类型的元素，则需要使用其他类型的选择器。

下面是一个完整的例子，可以更好地理解兄弟选择器的用法：

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 兄弟选择器</title>
	<style type="text/css">
		.box + p {
			color: red;
		}
		.item ~ h3 {
			color: blue;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<p>选中</p>
	<p>选中</p>
	<p>不选中</p>
	<div class="container">
		<div class="item"></div>
		<h3>选中</h3>
		<p>不选中</p>
		<h3>选中</h3>
		<h3>选中</h3>
		<div class="item"></div>
		<h3>选中</h3>
	</div>
</body>
</html>

三、结构伪类选择器

CSS3 结构伪类选择器是一种特殊的选择器，可以通过元素在文档中的位置来进行选择。常用的结构伪类选择器有以下几种：

:first-child 选择器：选择某个元素的第一个子元素。
:last-child 选择器：选择某个元素的最后一个子元素。
:nth-child(n) 选择器：选择某个元素的第 n 个子元素，其中 n 可以是数字、关键词或者公式。关键词有 even（偶数）和 odd（奇数）。
:nth-last-child(n) 选择器：选择某个元素的倒数第 n 个子元素，其中 n 可以是数字、关键词或者公式。关键词有 even（偶数）和 odd（奇数）。
:only-child 选择器：选择某个元素仅有的子元素。
:nth-of-type(n) 选择器：选择某个元素的第 n 个同类型子元素，其中 n 可以是数字、关键词或者公式。关键词有 even（偶数）和 odd（奇数）。
:nth-last-of-type(n) 选择器：选择某个元素的倒数第 n 个同类型子元素，其中 n 可以是数字、关键词或者公式。关键词有 even（偶数）和 odd（奇数）。
:only-of-type 选择器：选择某个元素仅有的同类型子元素。

语法格式如下：

/* 选择某个元素的第一个子元素 */
元素:first-child {
    /* 属性值 */
}
/* 选择某个元素的最后一个子元素 */
元素:last-child {
    /* 属性值 */
}
/* 选择某个元素的第 n 个子元素 */
元素:nth-child(n) {
    /* 属性值 */
}
/* 选择某个元素的倒数第 n 个子元素 */
元素:nth-last-child(n) {
    /* 属性值 */
}
/* 选择某个元素仅有的子元素 */
元素:only-child {
    /* 属性值 */
}
/* 选择某个元素的第 n 个同类型子元素 */
元素:nth-of-type(n) {
    /* 属性值 */
}
/* 选择某个元素的倒数第 n 个同类型子元素 */
元素:nth-last-of-type(n) {
    /* 属性值 */
}
/* 选择某个元素仅有的同类型子元素 */
元素:only-of-type {
    /* 属性值 */
}

下面是一个例子，选择 class 为 "container" 的 div 元素的第一个子元素和最后一个子元素：

<div class="container">
    <h3>第一个子元素</h3>
    <p>不选中</p>
    <p>不选中</p>
    <p>不选中</p>
    <h3>最后一个子元素</h3>
</div>

.container:first-child {
    color: red;
}
.container:last-child {
    color: blue;
}

在上面的例子中，选择器 .container:first-child 会选择第一个 h3 元素，并设置其颜色为红色，而选择器 .container:last-child 会选择最后一个 h3 元素，并设置其颜色为蓝色。

再来看一个例子，选择 class 为 "list" 的 ul 元素中第 2 个 li 元素和第 4 个 li 元素：

<ul class="list">
    <li>不选中</li>
    <li>选中</li>
    <li>不选中</li>
    <li>选中</li>
    <li>不选中</li>
</ul>

.list li:nth-child(2),
.list li:nth-child(4) {
    color: red;
}

在上面的例子中，选择器 .list li:nth-child(2) 会选择第 2 个 li 元素，并设置其颜色为红色，而选择器 .list li:nth-child(4) 会选择第 4 个 li 元素，并设置其颜色为红色。

需要注意的是，结构伪类选择器通常是基于元素在文档中的位置来进行选择的，因此对于动态生成的元素可能不起作用。

下面是一个完整的例子，可以更好地理解结构伪类选择器的用法：

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 结构伪类选择器</title>
	<style type="text/css">
		.container:first-child {
			color: red;
		}
		.container:last-child {
			color: blue;
		}
		.list li:nth-child(2),
		.list li:nth-child(4) {
			color: red;
		}
	</style>
</head>
<body>
	<div class="container">
		<h3>第一个子元素</h3>
		<p>不选中</p>
		<p>不选中</p>
		<p>不选中</p>
		<h3>最后一个子元素</h3>
	</div>
	<ul class="list">
		<li>不选中</li>
		<li>选中</li>
		<li>不选中</li>
		<li>选中</li>
		<li>不选中</li>
	</ul>
</body>
</html>

四、伪元素选择器

CSS3中的伪元素选择器是通过在选择器的末尾加上双冒号(::)来表示的。伪元素选择器用于向某一元素的某一部分添加样式，而不是对整个元素进行样式设置。以下是CSS3中常用的伪元素选择器及其用途：

::before伪元素：用于在某个元素的内容前面添加内容。
::after伪元素：用于在某个元素的内容后面添加内容。
::first-letter伪元素：用于设置某一元素的第一个字母的样式。
::first-line伪元素：用于设置某一元素的第一行的样式。
::selection伪元素：用于设置用户选中文本的样式。

下面是伪元素选择器的代码演示：

<style>
  /* ::before和::after伪元素 */
  .box::before {
    content: "Before";
    display: block;
    font-weight: bold;
  }
  .box::after {
    content: "After";
    display: block;
    font-weight: bold;
  }
  
  /* ::first-letter伪元素 */
  .first-letter::first-letter {
    font-size: 30px;
    font-weight: bold;
  }
  
  /* ::first-line伪元素 */
  .first-line::first-line {
    color: red;
    font-size: 20px;
    font-weight: bold;
  }
  
  /* ::selection伪元素 */
  .selected::selection {
    background-color: yellow;
    color: black;
  }
</style>

<div class="box">
  This is a box.
</div>

<p class="first-letter">
  This is a paragraph with a big first letter.
</p>

<p class="first-line">
  This is a paragraph. This is the first line of the paragraph.
</p>

<p class="selected">
  Select this text to see the ::selection pseudo-element in action.
</p>

上述代码演示了如何使用伪元素选择器给不同的元素添加样式。我们可以在浏览器中查看效果。

五、属性选择器

CSS3属性选择器是指基于元素的属性和属性值来选择元素的一种选择器。具体来说，就是通过元素的属性和属性值，来指定一个元素或多个元素。以下是属性选择器的详细解析与代码演示：

[attr] 属性选择器：选择带有指定属性的元素。

例如：选择所有带有 title 属性的元素。

*[title] {
  color: red;
}

[attr=value] 属性选择器：选择带有指定属性和值的元素。

例如：选择所有 title 属性值为 "example" 的元素。

*[title="example"] {
  color: red;
}

[attr~=value] 属性选择器：选择带有属性值中包含指定单词的元素。

例如：选择所有 class 属性值中包含单词 "example" 的元素。

*[class~="example"] {
  color: red;
}

[attr^=value] 属性选择器：选择带有属性值以指定值开头的元素。

例如：选择所有 href 属性以 "https" 开头的元素。

*[href^="https"] {
  color: red;
}

[attr$=value] 属性选择器：选择带有属性值以指定值结尾的元素。

例如：选择所有 href 属性以 ".pdf" 结尾的元素。

*[href$=".pdf"] {
  color: red;
}

[attr*=value] 属性选择器：选择带有属性值中包含指定值的元素。

例如：选择所有 href 属性值中包含 "google" 的元素。

*[href*="google"] {
  color: red;
}

代码演示：

/* [attr] 属性选择器 */
*[title] {
  color: red;
}

/* [attr=value] 属性选择器 */
*[title="example"] {
  color: green;
}

/* [attr~=value] 属性选择器 */
*[class~="example"] {
  background-color: yellow;
}

/* [attr^=value] 属性选择器 */
*[href^="https"] {
  color: blue;
}

/* [attr$=value] 属性选择器 */
*[href$=".pdf"] {
  color: purple;
}

/* [attr*=value] 属性选择器 */
*[href*="google"] {
  font-weight: bold;
}

HTML 示例：

<p title="example">This is an example paragraph.</p>
<p class="example-1">This is an example paragraph.</p>
<p class="example-2">This is an example paragraph.</p>
<a href="https://www.google.com">This is a link to Google.</a>
<a href="https://www.example.com/file.pdf">This is a link to a PDF file.</a>
<a href="https://www.google.com/search?q=example">This is a link to a Google search for "example".</a>

上述代码执行的效果如下所示：

![属性选择器示例结果](https://