极客笔记CSS 规则集的用途是什么
CSS代表层叠样式表，用于为HTML元素添加样式。 HTML用于创建网页或添加内容到网页中。然后，开发者使用CSS以特定的样式呈现HTML内容，使其看起来很棒。
CSS规则集主要包含两个部分。一个是CSS选择器，另一个是声明块。
CSS选择器用于选择HTML元素，声明块以键值对的形式包含CSS属性，用于应用到HTML元素上。
语法
用户可以根据以下语法使用CSS规则集来为HTML元素添加样式。
selector {
/* declaration block */
}
在上面的语法中，’selector’可以是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> Using the <i> class selector </i> in CSS ruleset </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。
在这里，我们有一个带有’id’为’card’的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> Using the <i> id selector </i> in CSS ruleset </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元素。
此外，我们还使用类名和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> Using the <i> Multiple selector </i> in CSS ruleset </h2>
<p class = "text1"> This is the first paragraph </p>
<p class = "text2"> This is a second paragraph. </p>
<p id = "para1"> This is the third paragraph. </p>
</body>
</html>
示例4（CSS嵌套元素选择器）
在下面的示例中，我们介绍了CSS的嵌套选择器。在HTML中，div元素包含了多个具有class名称为‘link’的<a>元素。
在CSS中，我们使用了‘div .link’ CSS选择器，它选择了所有具有class名称为‘link’的HTML元素，并且是div元素的后代元素。如果我们使用‘div.link’作为CSS选择器，它会应用样式于所有具有class名称为‘link’的div元素。因此，‘div.link’和‘div .link’是两个不同的CSS选择器。
在输出中，用户可以观察到CSS样式被应用于所有与div元素的后代元素<a>相关的HTML元素，而不应用于div元素外部的元素。
<html>
<head>
<style>
div .link {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h2> Using the <i> nested selectors </i> in CSS ruleset </h2>
<div>
<a href = "#" class = "link"> Link1 </a>
<a href = "#" class = "link"> Link2 </a>
<a href = "#" class = "link"> Link3 </a>
</div><br>
<a href = "#" class = "link"> Link 5 </a>
</body>
</html>
示例5（CSS伪选择器）
在这个示例中，我们展示了如何使用CSS伪选择器。有各种各样的CSS伪选择器，我们在这里使用了其中一些。
在这里，我们有一个包含4个带有”class”属性为”element”的子元素的”container” div元素。当用户悬停在div元素上时，我们使用”:hover”伪选择器来改变”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 pseudo class */
.container:hover {
background-color: red;
}
/* first child pseudo class */
.element:first-child {
background-color: green;
color: white;
}
/* last child pseudo class */
.element:last-child {
background-color: grey;
color: black;
}
/* nth child pseudo class */
.element:nth-child(2) {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h2> Using the <i> pseudo selectors </i> in CSS ruleset </h2>
<div class = "container">
<div class = "element"> First Child </div>
<div class = "element"> Second Child </div>
<div class = "element"> Third Child </div>
<div class = "element"> Fourth Child </div>
</div>
</body>
</html>
用户在本教程中学会了使用不同的CSS规则集。我们使用类名和id作为选择器。此外，我们还学会了使用多个CSS选择器和嵌套的CSS选择器。在最后一个示例中，我们学会了在CSS规则集中使用伪选择器。