[分享]css三种选择器的区别

在CSS中，有三种不同的选择器可以用来对特定的元素进行设置，这些选择器包括：元素选择器，类选择器和ID选择器。下面我们将详细介绍这三种选择器的区别。元素选择器 元素选择器是最基本的CSS选择器。它使用...

在CSS中，有三种不同的选择器可以用来对特定的元素进行设置，这些选择器包括：元素选择器，类选择器和ID选择器。下面我们将详细介绍这三种选择器的区别。

元素选择器 

元素选择器是最基本的CSS选择器。它使用HTML标签名称作为选择器来选择页面上所有的具有该标签的元素。例如，p元素选择器选取所有的段落。

类选择器 

类选择器是以"点"号开头的名称，它用来选择拥有相同类名的元素。一般来说，类选择器可以应用于多个元素，并且同一个元素可以拥有多个类。例如，下面的CSS代码定义了一个名为"red"的类选择器：

.red {
  color: red;
} 

在HTML中，可以将这个类名应用于任意元素，如下所示：

<p class="red">这是一个红色的段落</p> 

在这个例子中，使用了一个类选择器，来应用红色文本颜色。该类选择器的名称为"red"。

ID选择器 

ID选择器是以"#"开头的名称，它用来选择页面中拥有唯一ID的元素。一个页面中，同一个ID名只能出现一次。例如，下面的CSS代码定义了一个名为"header"的ID选择器：

#header {
  background-color: silver;
} 

在HTML中，可以将这个ID名应用于任意元素，如下所示：

<div id="header">这是头部部分</div> 

在这个例子中，使用了一个ID选择器，来应用银色的背景颜色。该ID选择器的名称为"header"。