首页 前端知识 CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器

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

2024-02-08 15:02:51 前端知识 前端哥 526 178 我要收藏

一、子级选择器

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 结构伪类选择器是一种特殊的选择器,可以通过元素在文档中的位置来进行选择。常用的结构伪类选择器有以下几种:

  1. :first-child 选择器:选择某个元素的第一个子元素。
  2. :last-child 选择器:选择某个元素的最后一个子元素。
  3. :nth-child(n) 选择器:选择某个元素的第 n 个子元素,其中 n 可以是数字、关键词或者公式。关键词有 even(偶数)和 odd(奇数)。
  4. :nth-last-child(n) 选择器:选择某个元素的倒数第 n 个子元素,其中 n 可以是数字、关键词或者公式。关键词有 even(偶数)和 odd(奇数)。
  5. :only-child 选择器:选择某个元素仅有的子元素。
  6. :nth-of-type(n) 选择器:选择某个元素的第 n 个同类型子元素,其中 n 可以是数字、关键词或者公式。关键词有 even(偶数)和 odd(奇数)。
  7. :nth-last-of-type(n) 选择器:选择某个元素的倒数第 n 个同类型子元素,其中 n 可以是数字、关键词或者公式。关键词有 even(偶数)和 odd(奇数)。
  8. :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中常用的伪元素选择器及其用途:

  1. ::before伪元素:用于在某个元素的内容前面添加内容。

  2. ::after伪元素:用于在某个元素的内容后面添加内容。

  3. ::first-letter伪元素:用于设置某一元素的第一个字母的样式。

  4. ::first-line伪元素:用于设置某一元素的第一行的样式。

  5. ::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属性选择器是指基于元素的属性和属性值来选择元素的一种选择器。具体来说,就是通过元素的属性和属性值,来指定一个元素或多个元素。以下是属性选择器的详细解析与代码演示:

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

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

*[title] {
  color: red;
}

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

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

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

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

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

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

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

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

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

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

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

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

  1. [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://

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1503.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!