CSS规则集有什么用？-css教程-PHP中文网

语法

示例 1（CSS 类名选择器）

Using the class selector in CSS ruleset

示例 2（CSS ID 选择器）

Using the id selector in CSS ruleset

示例 3（CSS 多重选择器）

Using the Multiple selector in CSS ruleset

示例 4（CSS 嵌套元素选择器）

Using the nested selectors in CSS ruleset

示例 5（CSS 伪选择器）

Using the pseudo selectors in CSS ruleset

首页

web前端

css教程

CSS规则集有什么用？

PHPz

Sep 09, 2023 pm 04:01 PM

CSS规则集有什么用？

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 id="Using-the-i-class-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-id-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-Multiple-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-nested-selectors-i-in-CSS-ruleset"> 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 id="Using-the-i-pseudo-selectors-i-in-CSS-ruleset"> 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>