◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
CSS规则集有什么用？
ID:13504 / 打印
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 选择器）
在下面的示例中，我们在定义 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 选择器一次性将相同的 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> 示例 4（CSS 嵌套元素选择器）
在下面的例子中，我们介绍了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> 示例 5（CSS 伪选择器）
在此示例中，我们演示了 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 规则集中的伪选择器。
