极客教程CSS规则集有什么用处？
CSS代表级联样式表。它用于设置HTML元素的样式。 HTML用于创建网页或向网页添加内容。然后，开发人员使用CSS以特定样式呈现HTML内容，使其看起来棒极了。
CSS规则集主要包含两个部分。一个是CSS选择器，另一个是声明块。
CSS选择器用于选择HTML元素，声明块包含以键值格式的CSS属性，以应用于HTML元素。
语法
用户可以按照以下语法使用CSS规则集来设置HTML元素的样式。
选择器 {
/* 声明块 */
}
在上述语法中，“选择器”可以是HTML元素的类名、id等，以选择HTML元素。声明块包含多个CSS属性及其值，以应用于HTML元素。
示例1（CSS类选择器）
在下面的示例中，我们使用类名作为CSS选择器来定义CSS规则集。我们在代码中有三个包含不同类名的div元素。我们通过它们的类名选择了每个div元素，并应用了不同的CSS样式，用户可以在输出中观察到此效果。
<html>
<head>
<style>
.one {
background-color: red;
color: white;
padding: 10px;
margin: 10px;
border: 1px solid green;
}
.two {
background-color: green;
color: white;
padding: 10px;
margin: 10px;
border: 3px solid yellow;
}
.three {
background-color: blue;
color: white;
padding: 10px;
margin: 10px;
border: 2px solid pink;
}
</style>
</head>
<body>
<h2> 在CSS规则集中使用类选择器 </i> </h2>
<div class = "one"> One </div>
<div class = "two"> Two </div>
<div class = "three"> Three </div>
</body>
</html>
示例2（CSS ID选择器）
在下面的示例中，我们使用HTML元素的Id作为CSS选择器来定义CSS规则集。在HTML中，两个元素永远不可能包含相同的ID。
这里，我们有一个带有“card” ID的div元素，其中包含两个其他ID等于“content1”和“content2”的div元素。我们通过访问它们的ID来设置所有HTML元素的样式，用户可以在输出中观察到此效果。
<html>
<head>
<style>
#card {
width: 140px;
height: 300px;
background-color: grey;
border-radius: 12px;
border: 2px solid red;
display: flex;
justify-content: space-between;
flex-direction: column;
}
#content1 {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 12px;
color: white;
border: 2px solid red;
margin: 20px;
}
#content2 {
width: 100px;
height: 100px;
color: white;
background-color: blue;
border-radius: 12px;
border: 2px solid red;
margin: 20px;
}
</style>
</head>
<body>
<h2> 在CSS规则集中使用ID选择器 </i> </h2>
<div id = "card">
<div id = "content1"> HTML </div>
<div id = "content2"> CSS </div>
</div>
</body>
</html>
示例3（CSS多重选择器）
在下面的示例中，我们使用多个CSS选择器在单个操作中应用相同的CSS样式于多个HTML元素。
我们有三个不同类名和ID的“p”元素。在CSS中，我们使用“.text1，.text2，#para1”CSS选择器将声明块中添加的相同样式应用于所有HTML元素。
此外，我们单独选择了所有三个HTML元素，使用类名和ID CSS选择器分别应用不同的样式于不同的HTML元素。
<html>
<head>
<style>
.text1,
.text2,
#para1 {
margin: 10px;
height: auto;
padding: 10px;
width: 200px;
}
.text1 {
background-color: red;
color: white;
font-size: 2rem;
}
.text2 {
background-color: green;
color: red;
font-size: 1.7rem;
}
#para1 {
background-color: blue;
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<h2> 在CSS规则集中使用多重选择器 </i> </h2>
<p class = "text1"> 这是第一段 </p>
<p class = "text2"> 这是第二段。 </p>
<p id = "para1"> 这是第三段。 </p>
</body>
</html>
示例4（CSS嵌套元素选择器）
在下面的示例中，我们引入了CSS的嵌套选择器。在HTML中，div元素包含多个具有类名“link”的元素。
在CSS中，我们使用“div .link”CSS选择器，选择所有类名为“link”的HTML元素和div元素的后代。如果我们将“div.link”作为CSS选择器使用，则它将对具有类名为“link”的所有div元素应用样式。因此，“div.link”和“div .link”是不同的CSS选择器。
在输出中，用户可以观察到应用于div元素外部元素的CSS样式，而不会应用于div元素的后代所有 HTML元素的样式。
<html>
<head>
<style>
div .link {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h2> 使用嵌套选择器 <i>（nested selectors）</i> 在 CSS 规则集中 </h2>
<div>
<a href="#" class="link">链接1</a>
<a href="#" class="link">链接2</a>
<a href="#" class="link">链接3</a>
</div><br>
<a href="#" class="link">链接5</a>
</body>
</html>
示例 5（CSS 伪选择器）
在此示例中，我们正在演示使用 CSS 伪选择器的方法。有各种 CSS 伪选择器，在此我们使用了其中的一些。
在这里，我们有一个包含 4 个子元素的“container” div 元素，其带有“element”类名。我们使用“:hover”伪选择器来在用户将光标悬停在 div 元素上时更改“container”div 元素的背景颜色。
之后，我们使用“:first-child”、“:last-child”和“:nth-child()”CSS 选择器与“.element”选择器一起分别选择第一个子元素、最后一个子元素和第 n 个子元素。
输出中，用户可以观察到应用于第一个子元素、最后一个子元素和第二个子元素的不同 CSS 样式。
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: blue;
padding: 10px;
display: flex;
justify-content: space-around;
border-radius: 12px;
font-size: 1.2rem;
}
/* hover 伪类 */
.container:hover {
background-color: red;
}
/* first child 伪类 */
.element:first-child {
background-color: green;
color: white;
}
/* last child 伪类 */
.element:last-child {
background-color: grey;
color: black;
}
/* nth child 伪类 */
.element:nth-child(2) {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h2>在 CSS 规则集中使用 <i>伪选择器</i> </h2>
<div class="container">
<div class="element">第一个子元素</div>
<div class="element">第二个子元素</div>
<div class="element">第三个子元素</div>
<div class="element">第四个子元素</div>
</div>
</body>
</html>
用户在本教程中学习了使用不同的 CSS 规则集。我们使用了类名和 ID 作为选择器。还学习了使用多个 CSS 选择器和嵌套 CSS 选择器。在最后一个示例中，我们学习了在 CSS 规则集中使用伪选择器。