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>Universal selector (*)</h1>

	 <div>
			Parent element
			<p>Child paragraph 1</p>
			<p>Child paragraph 2</p>
	 </div>

	 <p>Paragraph 3</p>
</body>
</html>

CSS 元素选择器

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

语法


/* Sets text color of all p tags to green */
p {
	 color: green;
}
/* Add underline to all h1 tags in document */
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>Element selector</h1>
			<p>Div with border </p>
			<p>Text aligned to center</p>
			<p>Paragraph with green color</p>
			<p>h1 with an underline</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">
						Learn CSS
				 </div>
				 <div class="bottomDivs">
						From
				 </div>
				 <div class="bottomDivs">
						TutorialsPoint
				 </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、#tutorial 和 #stylePoint 是应用于元素的 id 选择器：


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

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

<body>
	 <div id="style-div">
				 <div id="tutorial">
						Tutorials
						<span id="stylePoint">
							 Point
						</span>
				 </div>
				 <p>
						Here we used ids to 
						style different elements. 
				 </p>
	 </div>
</body>
</html>

CSS 属性选择器

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

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

语法  


/* Style all anchor tag with target attribute */
a[target] {
	 background-color: peachpuff;
}

/* Style all anchor tag that links to tutorialspoint */
a[href="https://www.qikepu.com"] {
	 background-color: peachpuff;
}

示例

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


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

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

			/* Attribute with value have more priority*/
			/* Hence black background applied to CSS link*/
			a[target="_self"] {
				 background-color: black;
			}
	 </style>
</head>

<body>
	 <h2>Attribute selector</h2>
	 <p>
			Styling applied to anchor element:
	 </p>

	 <a href="https://www.qikepu.com/">
			Tutorialspoint
	 </a>
	 <br><br>
	 <a href="/html/index.htm" target="_blank">
			HTML Tutorial
	 </a>
	 <br><br>
	 <a href="/css/index.htm" target="_self">
			CSS Tutorial
	 </a>
</body>

</html>

CSS 组选择器

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

语法


/* Apply same background color for h1 and h2 */
h1, h2 {
	 background-color: grey;
}

示例

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


<html>
<head>
	 <style>
			/* This applies to both <h1> and <h2> elements */
			h1, h2 {
						background-color: grey; 				  
						padding: 4px;
			}

			/*Applies to all paragraphs, elements with class*/
			/*'highlight', and element with ID 'hightlightSpan'*/
			p, .highlight, #hightlightSpan {
						background-color: yellow;
						padding: 10px;
			}
	 </style>
</head>

<body>
			<h1>CSS Selectors</h1>
			<h2>Group Selectors</h2>
			<p>This is a paragraph.</p>
			<div class="highlight">
				 This is div
			</div>
			<br>
			<span id="hightlightSpan">
				 This is span
			</span>
</body>
</html>   

CSS 伪类选择器

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

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

语法


/* Change background color on hover */
a :hover {
	 background-color: peachpuff; 
}
/* Change background color on clicking button */
button:active {
	 background-color: yellow;
}
/* Change border color on focusing input */
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>Pseudo-class selector</h2>
	 <p>
			Styling applied to anchor element and 
			button with a pseudo-class:
	 </p>
	 <a href="https://www.qikepu.com">
			Tutorialspoint
	 </a>
	 <br><br>
	 <button>Click Me</button>
</body>
</html>

CSS 伪元素选择器


 

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

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

语法


/* Define contents before paragraph */
a::before {
	 content: " ";
}

/* Style first letter of paragraph */
p::first-letter {
	 font-size: 2em;
}

示例

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


<html>
<head>
	 <style>
			/* Add and style contents before paragraph */
			p::before {
						content: "Note: ";
						font-weight: bold;
						color: red;
			}

			/* Add and style contents after paragraph */
			p::after {
						content: " [Read more]";
						font-style: italic;
						color: blue;
			}
	 </style>
</head>

<body>
	 <h2>Pseudo-element selector</h2>
			<p>This is a paragraph.</p>
</body>
</html>

CSS 后代选择器

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

语法  


div p {
	 color: blue;
}

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

示例

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


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

<body>
	 <div>
			<p>
				 This paragraph is inside a div 
				 and will be blue.
			</p>

			<section>
				 <p>
						This paragraph is inside a 
						section which is inside a 
						div and will also be blue.
				 </p>
			</section>
	 </div>
	 <p>
			This paragraph is outside the div 
			and will not be blue.
	 </p>
</body>
</html>

CSS 子选择器

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

语法


div > p {
	 color: blue;
}

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

示例

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


<!DOCTYPE html>
<html lang="en">
<head>
	 <style>
			div{
				 border: 2px solid;
			}
			div > p {
				 color: blue;
			}
	 </style>
</head>
<body>
			<div>
				 <p>
						This paragraph is inside a div and 
						will be blue.
				 </p>

				 <section>
						<p>
							 This paragraph is inside a  
							 section which is inside a div
							 and will not be blue as this 
							 is not direct child
						</p>
				 </section>
			</div>
			<p>
				 This paragraph is outside the div
				 and will not be blue.
			</p>
</body>
</html>

CSS 相邻同级选择器

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

语法


h1 + p {
	 margin-top: 0;
}

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

示例

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


<!DOCTYPE html>
<html lang="en">
<head>
	 <style>
			div{
				 border: 4px solid;
			}
			div + p {
				 color: blue;
			}
	 </style>
</head>
<body>
			<p>
				 This paragraph is above the div 
				 and will not be blue
			</p>
			<div>
				 <p>
						This paragraph is inside a div 
						and will not be blue.
				 </p>
			</div>
			<p>
				 This paragraph 1 after the div 
				 and will be blue.
			</p>
			<p>This paragraph 2 after the 
				 div and will not be blue.
			</p>
</body>
</html>

CSS 通用同级选择器

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

语法


h1 ~ p {
	 color: gray;
}

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

示例

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


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

<body>
			<p>
				 This paragraph is above the div 
				 and will not be blue
			</p>
			<div>
				 <p>
						This paragraph is inside a div 
						and will not be blue.
				 </p>
			</div>
			<p>
				 This paragraph 1 after the div 
				 and will be blue.
			</p>
			<p>This paragraph 2 after the 
				 div and will be blue.
			</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>& nesting selector</h1>
	 <p id="sample">
			Hover <a href="#">over the link</a>.
	 </p>
</body>
</html>
打印本页
上一页
下一页