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 样式，用户可以在输出中观察到。

   


   
 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 元素来设置它们的样式，用户可以在输出中观察到这些元素。

   


   
 Using the  id selector  in CSS ruleset 
   

      
 HTML 
      
 CSS 
   

示例 3（CSS 多重选择器）

在下面的示例中，我们使用多个 CSS 选择器一次性将相同的 CSS 样式应用于多个 HTML 元素。

我们有三个具有不同类名和 ID 的

LHT蓝海豚团购导航

Lht蓝海豚(大维)团购导航系统是一套开源程序，采用PHP+MySql平台开发，具有强大的多规则API采集功能、精确化引导消费功能，卓越的负载能力和访问速度，全面支持第三方整合（微博、短信等）前台功能团购名站：显示分类下的所有团购网站,点击团购站,可直接进行查看、推荐、收藏精品商城：为网民推荐展示非团购网站的网上商城今日团购：显示各团购网站正在进行的团购团购排行：今日团购商品可按价格、行业、折扣、

下载

元素。在 CSS 中，我们使用“.text1、.text2、#para1”CSS 选择器将声明块中添加的相同样式应用到所有 HTML 元素。

此外，我们还使用类名称和 ID CSS 选择器分别选择了所有三个 HTML 元素，以便在不同元素上应用不同的样式。

   


   
 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 元素外部的元素。

   


   
 Using the  nested selectors  in CSS ruleset 
   

       Link1 
       Link2 
       Link3 
   


    Link 5 

示例 5（CSS 伪选择器）

在此示例中，我们演示了 CSS 伪选择器的使用。 CSS 伪选择器有很多种，我们在这里使用了其中的一些。

这里，我们有一个“container”div 元素，其中包含 4 个具有“element”类名称的子元素。当用户将鼠标悬停在 div 元素上时，我们使用“:hover”伪选择器来更改“container”div 元素的背景颜色。

之后，我们使用 ':first-child'、':last-child' 和 ':nth-child()' CSS 选择器以及 '.element' 选择器来选择第一个子元素、最后一个子元素，和第n个孩子，分别。

在输出中，用户可以观察到不同的 CSS 样式应用于第一个子项、最后一个子项和第二个子项。

   


   
 Using the  pseudo selectors  in CSS ruleset 
   

      
 First Child 
      
 Second Child 
      
 Third Child 
      
 Fourth Child 
   

用户在本教程中学习了如何使用不同的 CSS 规则集。我们使用类名和 id 作为选择器。此外，我们还学习了使用多个 CSS 选择器和嵌套 CSS 选择器。在上一个示例中，我们学习了如何使用 CSS 规则集中的伪选择器。