CSS - 选择器_CSS 菜鸟教程

CSS 选择器 用于选择要在网页上设置样式的 HTML 元素。它们允许您定位特定元素或元素组以应用颜色、字体、边距等样式。

选择器选择的元素称为选择器的主题。

CSS 通用选择器

通用选择器，用星号（ * ）表示，是一个特殊的选择器，用于匹配 HTML 文档中的所有元素。这些通常用于向文档中的所有元素添加相同的长度边距和填充。

语法

* {
	 margin: 0;
	 padding: 0;
}

根据上述语法，通用选择器用于将边距和填充 0 应用于所有 HTML 元素。

例子

以下示例演示了通用选择器（ * ）的用法：

<html>
<head>
	 <style>
			* {
				 margin: 0;
				 padding: 0;
				 background-color: peachpuff;
				 color: darkgreen;
				 font-size: 25px;
			}
	 </style>
</head>
<body>
	 <h1>通用选择器（*）示例</h1>
	 <div>
			父元素
			<p>子段落 1</p>
			<p>子段落 2</p>
	 </div>
	 <p>第3段文字</p>
</body>
</html>

CSS 元素选择器

元素选择器以 HTML 元素为目标，例如 <h1>、<p> 等。当我们想要对文档所有 <p> 或 <h1> 标签应用相似的样式时，可以使用此功能。

语法

/* 将所有p标签的文本颜色设置为绿色 */
p {
	 color: green;
}
/* 为文档中的所有h1标记添加下划线 */
h1 {
	 text-decoration-line: underline;
}

例子

以下示例演示元素选择器的用法：

<html>
<head>
	 <style>
			div {
				 border: 5px inset gold;
				 width: 300px;
				 text-align: center;
			}

			p {
				 color: green;
			} 

			h1 {
				 text-decoration-line: underline;
			}
	 </style>
</head>
<body>
	 <div>
			<h1>元素选择器</h1>
			<p>Div 边框 </p>
			<p>文本居中对齐</p>
			<p>绿色段落</p>
			<p>带下划线的h1</p>
	 </div>
</body>
</html>

CSS 类选择器

类选择器使用其 class 属性的特定值定位元素以设置其样式。CSS 的类用句点（ . ）符号表示。

语法

.sideDiv {
	 text-decoration-line: underline;
}

.topDiv {
	 color: green;
	 font-size: 25px;
}

示例

<html>
<head>
	 <style>
			.style-div {
				 border: 5px inset gold;
				 width: 300px;
				 text-align: center;
			}

			.topDivs{
				 font-weight: bold;
				 font-size: 30px;
			}
			.bottomDivs{
				 color: green;
				 font-size: 20px;
			}
	 </style>
</head>

<body>
	 <div class="style-div">
				 <div class="topDivs">
						Hello World
				 </div>
				 <div class="topDivs">
						学习CSS
				 </div>
				 <div class="bottomDivs">
						欢迎访问
				 </div>
				 <div class="bottomDivs">
						启科普在线教程:www.qikepu.com
				 </div>
	 </div>
</body>

</html>

CSS ID 选择器

ID 选择器针对具有 id 属性特定值的单个元素来设置其样式。CSS 中的 id 由 哈希（ # ）符号表示。同一类可以应用于多个元素，但 id 对于元素是唯一的。

语法

#style-p {
	 color: green;
	 font-size: 25px;
} 

#style-h1 {
	 text-decoration-line: underline;
	 color: red;
}

例子

以下示例演示了 id 选择器的使用，其中 #style-div、#qikepu 和 #stylePoint 是应用于元素的 id 选择器：

<html>
<head>
	 <style>
			#style-div {
				 border: 5px inset gold;
				 width: 300px;
				 text-align: center;
			}

			#qikepu{
				 color: green;
				 font-size: 20px;
			}
			#stylePoint{
				 color: black;
				 font-size: 15px;
				 font-weight: bold;
			}
	 </style>
</head>

<body>
	 <div id="style-div">
				 <div id="qikepu">
						启科普教程
						<span id="stylePoint">
							 欢迎大家！
						</span>
				 </div>
				 <p>在这里，我们对不同元素使用了id。</p>
	 </div>
</body>
</html>

CSS 属性选择器

属性选择器根据特定属性或元素上的属性值来定位元素。

有关属性选择器的详细说明，请参阅此属性选择器文章。

语法

/* 使用目标属性设置所有锚点标签的样式 */
a[target] {
	 background-color: peachpuff;
}

/* 设置链接到启科普 www.qikepu.com 的所有锚点标签样式 */
a[href="https://www.qikepu.com"] {
	 background-color: peachpuff;
}

示例

以下示例演示了属性选择器的用法：

<html>
<head>
	 <style>
			a[href]{
				 font-size: 2em;
			}

			a[target] {
				 background-color: peachpuff;
				 color: blueviolet;
			}

			/* 具有值的属性具有更高的优先级 */
			/* 因此，CSS链接采用了黑色背景 */
			a[target="_self"] {
				 background-color: black;
			}
	 </style>
</head>

<body>
	 <h2>属性选择器</h2>
	 <p>锚定元件的造型：</p>
	 <a href="https://www.qikepu.com/">启科普</a>
	 <br><br>
	 <a href="/html/index.html" target="_blank">HTML 教程</a>
	 <br><br>
	 <a href="/css/index.html" target="_self">CSS 教程</a>
</body>

</html>

CSS 组选择器

CSS 组选择器允许我们一次对多个元素应用相同的样式。元素的名称可以用 逗号（ , ）分隔。建议使用此方法，因为它可以保持 CSS 的简洁性并避免冗余。

语法

/* 为h1和h2应用相同的背景颜色 */
h1, h2 {
	 background-color: grey;
}

示例

以下示例演示如何在 CSS 使用组选择器。

<html>
<head>
	 <style>
			/* 适用于<h1>和<h2>元素 */
			h1, h2 {
						background-color: grey; 				  
						padding: 4px;
			}

			/* 适用于所有具有类的段落和元素 */
			/* “highlight”，以及ID为“highlightSpan”的元素 */
			p, .highlight, #hightlightSpan {
						background-color: yellow;
						padding: 10px;
			}
	 </style>
</head>
<body>
			<h1>CSS选择器</h1>
			<h2>组选择器</h2>
			<p>这是一个段落。</p>
			<div class="highlight">这是一个div</div>
			<br>
			<span id="hightlightSpan">这是一个span</span>
</body>
</html>

CSS 伪类选择器

伪类选择器用于设置元素的特定状态样式，例如 :hover 用于在悬停时设置元素的样式。

有关 伪类选择器 的详细列表，请参阅此 CSS 伪类教程。

语法

/* 鼠标悬停时更改背景颜色 */
a :hover {
	 background-color: peachpuff; 
}
/* 单击按钮时更改背景颜色 */
button:active {
	 background-color: yellow;
}
/* 获得焦点输入时更改边框颜色 */
input:focus {
	 border-color: blue;
}

示例

以下示例演示 伪类选择器的用法：

<html>
<head>
	 <style>
			a:hover {
				 background-color: peachpuff;
				 color: green;
				 font-size: 2em;
			}
			button:active {
				 background-color: yellow;
			}
	 </style>
</head>

<body>
	 <h2>伪类选择器</h2>
	 <p>锚定元件和带有伪类的按钮：</p>
	 <a href="https://www.qikepu.com">启科普</a>
	 <br><br>
	 <button>点击试试</button>
</body>
</html>

CSS 伪元素选择器

伪元素选择器 用于设置元素的特定部分的样式，而不是元素本身的样式。

有关 伪元素选择器 的详细列表，请参阅此 CSS 伪元素教程。

语法

/* 在段落之前定义内容 */
a::before {
	 content: " ";
}

/* 段落首字母的样式 */
p::first-letter {
	 font-size: 2em;
}

示例

以下示例演示了伪元素选择器 ::before 和 ::after 的使用：

<html>
<head>
	 <style>
			/* 在段落前添加内容并设置样式 */
			p::before {
						content: "Note: ";
						font-weight: bold;
						color: red;
			}

			/* 在段落后添加内容并设置样式 */
			p::after {
						content: " [Read more]";
						font-style: italic;
						color: blue;
			}
	 </style>
</head>
<body>
	 <h2>伪元素选择器</h2>
	  <p>这是一个段落。</p>
</body>
</html>

CSS 后代选择器

css 的 后代选择器 用于设置作为特定指定标签的子标签的所有标签的样式。父元素和子元素之间的单个空格用于提及作为后代。

语法

div p {
	 color: blue;
}

上述代码将 div 元素内的段落标签的文本颜色设置为蓝色。

示例

以下示例展示了如何在 css 使用后代选择器。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	 <style>
			div{
				 border: 2px solid;
			}
			div p {
				 color: blue;
			}
	 </style>
</head>

<body>
	 <div>
			<p>这个段落位于div内，并且显示蓝色。</p>
			<section>
			<p>这个段落位于div内的一个节内，也显示蓝色。</p>
			</section>
	 </div>
	 <p>这个段落在div之外，不会显示蓝色。</p>
</body>
</html>

CSS 子选择器

css 子元素选择器用于定位特定元素的所有直接子元素。这用 大于（ > ）符号表示。

语法

div > p {
	 color: blue;
}

上面的代码将直接位于 div 元素内的段落标签的文本颜色设置为蓝色。

示例

以下示例展示了如何使用 css 子选择器。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	 <style>
			div{
				 border: 2px solid;
			}
			div > p {
				 color: blue;
			}
	 </style>
</head>
<body>
	<div>
		<p>此段落位于div内，显示蓝色的。</p>
		<section>
		<p>此段落位于div内的一个节内，不会显示蓝色，因为这不是直接的子节</p>
		</section>
</div>
<p>此段落位于div之外，不会显示蓝色。</p>
</body>
</html>

CSS 相邻同级选择器

CSS 相邻同级选择器 用于定位紧接在指定元素前面的元素。加号（ + ） 用于表示相邻的兄弟姐妹。

语法

h1 + p {
	 margin-top: 0;
}

上面的代码将紧跟在 h1 标签之后的段落标签的上边距设置为 0。

示例

以下示例演示如何使用 css 相邻同级选择器。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	 <style>
			div{
				 border: 4px solid;
			}
			div + p {
				 color: blue;
			}
	 </style>
</head>
<body>
	<p>本段落位于div之上 ,不会显示蓝色。</p>
	<div>
	<p>此段落位于div内，也不会显示蓝色。</p>
	</div>
	<p>本段落在div之后，会显示蓝色。</p>
	<p>这个第2段落之后的div，不会显示蓝色的。</p>
</body>
</html>

CSS 通用同级选择器

CSS 通用同级选择器 用于定位指定元素之前的所有元素。波浪号（ ~ ） 用于表示一般兄弟姐妹。

语法

h1 ~ p {
	 color: gray;
}

上述代码将 h1 标签后所有段落的文本颜色设置为灰色。

示例

以下示例显示了如何使用 css 通用同级选择器。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	 <style>
			div{
				 border: 4px solid;
			}
			div ~ p {
				 color: blue;
			}
	 </style>
</head>

<body>
	<p>本段落位于div之上，不会显示蓝色。</p>
	<div>
	<p>此段落位于div中，不会显示蓝色。</p>
	</div>
	<p>这个在div后面的第 1 段文字，显示蓝色。</p>
	<p>这个在div后面的第 2 段文字，也显示蓝色。</p>
</body>
</html>

CSS 嵌套选择器

CSS 嵌套允许将一个样式规则嵌套在另一个规则中，子规则的选择器相对于父规则的选择器。

CSS 嵌套选择器的特性

嵌套选择器显示父规则和子规则之间的关系。

当浏览器解析嵌套的选择器时，它会自动在选择器之间添加一个空格，从而创建一个新的 CSS 选择器规则。
在需要将嵌套规则附加到父规则（没有任何空格）的情况下，例如在使用伪类或复合选择器时，必须立即预置 & 嵌套选择器以实现所需的结果。
为了反转规则的上下文，可以附加 & 嵌套选择器。
& 嵌套选择器可以有多个实例。

语法

nav {
	 & ul {
			list-style: none;
			& li {
			display: inline-block;
			& a {
				 text-decoration: none;
				 color: blue;
				 &:hover {
						color: red;
				 }
			}
			}
	 }
}

示例

以下示例演示嵌套选择器（&）的使用：

<html>
<head>
	 <style>
			#sample {
				 font-family: Verdana, Geneva, Tahoma, sans-serif;
				 font-size: 1.5rem;
				 & a {
						color: crimson;
						&:hover,
						&:focus {
							 color: green;
							 background-color: yellow;
						}
				 }
			}
	 </style>
</head>
<body>
	 <h1>& 嵌套选择器示例</h1>
	 <p id="sample">悬停 <a href="#">通过链接</a>.</p>
</body>
</html>

<< CSS - 语法 CSS - 包含 >>