所属分类：web前端开发
CSS 代表层叠样式表。它用于设置 HTML 元素的样式。 HTML 用于创建网页或向网页添加内容。之后，开发人员使用 CSS 以特定样式呈现 HTML 内容，使其看起来很棒。
CSS规则集主要包含两部分。一个是 CSS 选择器，另一个是声明块。
CSS选择器用于选择HTML元素，声明块包含键值格式的CSS属性以应用于HTML元素。
用户可以按照以下语法使用 CSS 规则集来设置 HTML 元素的样式。
微博登录
QQ登录selector {
/* declaration block */
}
在上面的语法中，‘selector’可以是HTML元素的类名、id等，用于选择HTML元素。声明块包含多个 CSS 属性及其值以应用于 HTML 元素。
在下面的示例中，我们在定义 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>
在下面的示例中，我们在定义 CSS 规则集时使用 HTML 元素的 id 作为 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>
在下面的示例中，我们使用多个 CSS 选择器一次性将相同的 CSS 样式应用于多个 HTML 元素。
我们有三个具有不同类名和 ID 的
元素。在 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>
在下面的例子中，我们介绍了CSS的嵌套选择器。在 HTML 中，div 元素包含多个类名为“link”的 元素。
在 CSS 中，我们使用了“div .link”CSS 选择器，它选择类名为“link”的所有 HTML 元素以及 div 元素的后代。如果我们使用“div.link”作为 CSS 选择器，它会将样式应用于所有类名为“link”的 div 元素。因此，“div.link”和“div .link”都是不同的 CSS 选择器。
在输出中，用户可以观察到 CSS 样式应用于所有 HTML 元素，这些元素是 div 元素的后代，但未应用于 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>
在此示例中，我们演示了 CSS 伪选择器的使用。 CSS 伪选择器有很多种，我们在这里使用了其中的一些。
这里，我们有一个“container”div 元素，其中包含 4 个具有“element”类名称的子元素。当用户将鼠标悬停在 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 规则集中的伪选择器。
