选择所需 - Html (1)

📌 相关文章

📜 选择所需 - Html (1)

📅 最后修改于: 2023-12-03 15:28:21.788000 🧑 作者: Mango

选择所需 - HTML

HTML是前端开发的基石，了解HTML选择器的使用可以让你更加高效地开发Web应用。本文会介绍HTML选择器的基本用法以及几个常用的选择器。

基本选择器

HTML基本选择器是使用元素名称、class或id来选择HTML元素的。下面是它们的用法：

**选择元素名：**使用元素名称来选择元素，如选择所有段落元素：p。
**选择类：**使用.classname来选择class为classname的元素，如选择所有class为“intro”的元素：.intro。
**选择id：**使用#idname来选择id为idname的元素，如选择id为“myParagraph”的元素：#myParagraph。

下面是一个例子，展示如何使用这些基本选择器：

<!DOCTYPE html>
<html>
<head>
	<title>基本选择器</title>
	<style>
		.intro {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h1>标题</h1>
	<p>这是一个段落元素。</p>
	<p class="intro">这是一个使用intro class的段落元素。</p>
	<p id="myParagraph">这是一个使用myParagraph id的段落元素。</p>
</body>
</html>

这个例子中，所有段落元素被选择，使用intro class的段落元素有黄色的背景色，使用myParagraph id的段落元素的背景色没有改变。

复合选择器

复合选择器是使用两个或多个基本选择器组合起来创建的选择器。下面是几个常见的复合选择器：

**多元素选择器：**可以选择多个元素，使用逗号来分隔它们，如选择所有段落元素和所有标题元素：p, h1。
**后代选择器：**选择某个元素的后代元素，使用空格来分隔它们，如选择所有段落元素中的strong元素：p strong。
**子元素选择器：**选择某个元素的子元素，使用大于号来分隔它们，如选择列表中的所有li元素：ul > li。
**相邻兄弟选择器：**选择某个元素之后的相邻同胞元素，使用加号来分隔它们，如选择p元素后面的相邻同胞元素：p + *。
**后继兄弟选择器：**选择某个元素之后的所有同胞元素，使用波浪号来分隔它们，如选择列表中id为item2之后的所有同胞元素：#item2 ~ *。

下面是一个例子，展示如何使用这些复合选择器：

<!DOCTYPE html>
<html>
<head>
	<title>复合选择器</title>
	<style>
		p, h1 {
			color: red;
		}
		li > a {
			background-color: #f9f9f9;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h1>标题1</h1>
	<h2>标题2</h2>
	<p>这是一个段落元素。</p>
	<p class="intro"><strong>使用intro class的段落元素的<strong>strong</strong>元素</strong></p>
	<ul>
		<li><a href="#">项1</a></li>
		<li><a href="#">项2</a></li>
		<li><a href="#">项3</a></li>
	</ul>
	<p>这是另一个段落元素。</p>
	<p class="intro"><em>使用intro class的段落元素的<strong>em</strong>元素</em></p>
	<p>这是最后一个段落元素。</p>
</body>
</html>

这个例子中，所有段落元素和所有标题元素都是红色的，列表中使用a元素的li元素具有粗体字体和灰色的背景色。

属性选择器

属性选择器是使用属性名称和属性值来选择元素的。下面是它们的用法：

**[attribute]:**选择具有attribute属性的元素。
**[attribute=value]:**选择具有attribute属性且值为value的元素，如选择class为“intro”的元素：[class=intro]。
**[attribute~=value]:**选择具有attribute属性且值为包含value的字符串的元素，如选择class属性包含“intro”的元素：[class~=intro]。
**[attribute|=value]:**选择具有attribute属性且值为value或者以value开头的元素，如选择class为“intro”的元素和class为“intro-xxx”的元素：[class|=intro]。
**[attribute^=value]:**选择具有attribute属性且值以value开头的元素，如选择title以“W3School”开头的元素：[title^=W3School]。
**[attribute$=value]:**选择具有attribute属性且值以value结尾的元素，如选择href以“.pdf”结尾的元素：[href$=.pdf]。
*[attribute=value]:**选择具有attribute属性且值包含value的元素，如选择title包含“W3School”的元素：[title*=W3School]。

下面是一个例子，展示如何使用这些属性选择器：

<!DOCTYPE html>
<html>
<head>
	<title>属性选择器</title>
	<style>
		[title] {
			font-weight: bold;
		}
		[title~=flower] {
			color: yellow;
		}
		[href$=.pdf] {
			color: red;
		}
	</style>
</head>
<body>
	<h1 title="这是标题">标题</h1>
	<p title="这是一朵花。">这是一个段落元素。</p>
	<p class="intro" title="这也是一朵花。">这是另一个段落元素。</p>
	<a href="https://www.w3schools.com/html/mypdf.pdf">链接到PDF文件</a>
</body>
</html>

在这个例子中，所有具有title属性的元素都加粗了，具有title属性且值包含“flower”的元素都变成了黄色。所有链接到以“.pdf”结尾的文件的链接字体颜色都变成了红色。

伪类选择器

伪类选择器是使用虚假类来选择元素的。下面是它们的用法：

**:active：**选择处于活动状态的元素，如链接被点击时。
**:hover：**选择被鼠标悬停的元素。
**:focus：**选择得到焦点的元素，如文本框。
**:first-child：**选择父元素的第一个子元素。
**:last-child：**选择父元素的最后一个子元素。
**:nth-child(n)：**选择父元素的第n个子元素，如选择父元素的第2个子元素：:nth-child(2)。
**:nth-last-child(n)：**选择父元素的倒数第n个子元素，如选择父元素的倒数第2个子元素：:nth-last-child(2)。

下面是一个例子，展示如何使用这些伪类选择器：

<!DOCTYPE html>
<html>
<head>
	<title>伪类选择器</title>
	<style>
		a:active, a:hover {
			font-weight: bold;
			color: red;
		}
		input[type=text]:focus {
			background-color: yellow;
		}
		li:first-child {
			color: blue;
		}
		li:nth-child(even) {
			background-color: #f2f2f2;
		}
		li:nth-child(3) {
			background-color: yellow;
		}
		li:last-child {
			color: green;
		}
	</style>
</head>
<body>
	<h1>标题</h1>
	<a href="#">链接1</a>
	<a href="#">链接2</a>
	<label for="input1">文本框：</label>
	<input type="text" id="input1">
	<ul>
		<li>项1</li>
		<li>项2</li>
		<li>项3</li>
		<li>项4</li>
		<li>项5</li>
		<li>项6</li>
		<li>项7</li>
	</ul>
</body>
</html>

在这个例子中，链接在悬停或点击时都变成了加粗字体和红色字体颜色。文本框在获取焦点时有黄色背景色。列表的第一个项是蓝色字体颜色，偶数项的背景色是灰色的。列表的第3项有黄色背景色，最后一个项是绿色的。