数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究CSS 规则集有什么用？
CSS 代表层叠样式表 (Cascading Style Sheet)。它用于设置 HTML 元素的样式。HTML 用于创建网页或向网页添加内容。之后，开发者使用 CSS 来呈现 HTML 内容的特定样式，使其看起来更美观。
CSS 规则集主要包含两部分。一个是 CSS 选择器，另一个是声明块。
CSS 选择器用于选择 HTML 元素，声明块包含键值对格式的 CSS 属性，应用于 HTML 元素。
语法
用户可以按照以下语法使用 CSS 规则集来设置 HTML 元素的样式。
selector {
/* declaration block */
}
在上面的语法中，“选择器”可以是 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 选择器）
在下面的示例中，我们在定义 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>
示例 3（CSS 多个选择器）
在下面的示例中，我们使用了多个 CSS 选择器来一次性对多个 HTML 元素应用相同的 CSS 样式。
我们有三个 <p> 元素，具有不同的类名和 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>
示例 4（CSS 嵌套元素选择器）
在下面的示例中，我们介绍了 CSS 的嵌套选择器。在 HTML 中，div 元素包含多个类名为“link”的 <a> 元素。
在 CSS 中，我们使用了“`div .link`” CSS 选择器，它选择所有类名为“link”且是 div 元素后代的 HTML 元素。如果我们使用“`div.link`”作为 CSS 选择器，它会将样式应用于所有类名为“link”的 div 元素。“`div.link`”和“`div .link`”是两个不同的 CSS 选择器。
在输出中，用户可以观察到 CSS 样式应用于所有 <a> 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>
示例 5（CSS 伪选择器）
在这个示例中，我们演示了如何使用 CSS 伪选择器。有各种 CSS 伪选择器，我们在这里使用了一些。
这里，我们有一个名为“container”的 div 元素，其中包含 4 个类名为“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 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 规则集中使用伪选择器。
458 次浏览
