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 样式，用户可以在输出中观察到。
.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; } Using the class selector in CSS ruleset
One Two Three
示例 2（CSS ID 选择器）
在下面的示例中，我们在定义 CSS 规则集时使用 HTML 元素的 id 作为 CSS 选择器。在 HTML 中，两个元素永远不能包含相同的 id。
这里，我们有一个 id 为“card”的 div 元素，其中包含另外两个 id 等于“content1”和“content2”的 div 元素。我们通过通过 ID 访问所有 HTML 元素来设置它们的样式，用户可以在输出中观察到这些元素。
#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; } Using the id selector in CSS ruleset
HTML CSS
示例 3（CSS 多重选择器）
在下面的示例中，我们使用多个 CSS 选择器一次性将相同的 CSS 样式应用于多个 HTML 元素。
我们有三个具有不同类名和 ID 的
元素。在 CSS 中，我们使用“.text1、.text2、#para1”CSS 选择器将声明块中添加的相同样式应用到所有 HTML 元素。
此外，我们还使用类名称和 ID CSS 选择器分别选择了所有三个 HTML 元素，以便在不同元素上应用不同的样式。
.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; } Using the Multiple selector in CSS ruleset
This is the first paragraph
This is a second paragraph.
This is the third paragraph.
示例 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 元素外部的元素。
div .link { color: red; text-decoration: none; } Using the nested selectors in CSS ruleset
Link 5
示例 5（CSS 伪选择器）
在此示例中，我们演示了 CSS 伪选择器的使用。 CSS 伪选择器有很多种，我们在这里使用了其中的一些。
这里，我们有一个“container”div 元素，其中包含 4 个具有“element”类名称的子元素。当用户将鼠标悬停在 div 元素上时，我们使用“:hover”伪选择器来更改“container”div 元素的背景颜色。
之后，我们使用 ‘:first-child’、’:last-child’ 和 ‘:nth-child()’ CSS 选择器以及 ‘.element’ 选择器来选择第一个子元素、最后一个子元素，和第n个孩子，分别。
在输出中，用户可以观察到不同的 CSS 样式应用于第一个子项、最后一个子项和第二个子项。
.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; } Using the pseudo selectors in CSS ruleset
First Child Second Child Third Child Fourth Child
用户在本教程中学习了如何使用不同的 CSS 规则集。我们使用类名和 id 作为选择器。此外，我们还学习了使用多个 CSS 选择器和嵌套 CSS 选择器。在上一个示例中，我们学习了如何使用 CSS 规则集中的伪选择器。
以上就是CSS规则集有什么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625832.html
微信扫一扫 
支付宝扫一扫 
