CSS规则集有什么用处？

CSS代表级联样式表。它用于设置HTML元素的样式。 HTML用于创建网页或向网页添加内容。然后，开发人员使用CSS以特定样式呈现HTML内容，使其看起来棒极了。

CSS规则集主要包含两个部分。一个是CSS选择器，另一个是声明块。

CSS选择器用于选择HTML元素，声明块包含以键值格式的CSS属性，以应用于HTML元素。

语法

用户可以按照以下语法使用CSS规则集来设置HTML元素的样式。

选择器 {
   /* 声明块 */
}

在上述语法中，“选择器”可以是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> 在CSS规则集中使用类选择器 </i> </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。

这里，我们有一个带有“card” ID的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> 在CSS规则集中使用ID选择器 </i> </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元素。

此外，我们单独选择了所有三个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> 在CSS规则集中使用多重选择器 </i> </h2>
   <p class = "text1"> 这是第一段 </p>
   <p class = "text2"> 这是第二段。 </p>
   <p id = "para1"> 这是第三段。 </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选择器。

在输出中，用户可以观察到应用于div元素外部元素的CSS样式，而不会应用于div元素的后代所有 HTML元素的样式。

<html>
<head>
   <style>
      div .link {
         color: red;
         text-decoration: none;
      }
   </style>
</head>
<body>
   <h2> 使用嵌套选择器 <i>（nested selectors）</i> 在 CSS 规则集中 </h2>
   <div>
      <a href="#" class="link">链接1</a>
      <a href="#" class="link">链接2</a>
      <a href="#" class="link">链接3</a>
   </div><br>
   <a href="#" class="link">链接5</a>
</body>
</html>

示例 5（CSS 伪选择器）

在此示例中，我们正在演示使用 CSS 伪选择器的方法。有各种 CSS 伪选择器，在此我们使用了其中的一些。

在这里，我们有一个包含 4 个子元素的“container” div 元素，其带有“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 伪类 */
      .container:hover {
         background-color: red;
      }
      /* first child 伪类 */
      .element:first-child {
         background-color: green;
         color: white;
      }
      /* last child 伪类 */
      .element:last-child {
         background-color: grey;
         color: black;
      }
      /* nth child 伪类 */
      .element:nth-child(2) {
         background-color: pink;
         color: green;
      }
   </style>
</head>
<body>
   <h2>在 CSS 规则集中使用 <i>伪选择器</i> </h2>
   <div class="container">
      <div class="element">第一个子元素</div>
      <div class="element">第二个子元素</div>
      <div class="element">第三个子元素</div>
      <div class="element">第四个子元素</div>
   </div>
</body>
</html>