CSS选择器(一)

zhezhongyun 2025-05-21 17:55 13 浏览

CSS选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。

选择器分为基础选择器和复合选择器两个大类，这里先介绍一下基础选择器。

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

// 语法

标签名{

      属性1: 属性值1;

      属性2: 属性值2;

      属性3: 属性值3;

      ...

}

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。能快速为页面中同类型的标签统一设置样式。缺点是不能设计差异化样式，只能选择全部的当前标签。

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。

// 语法
.类名 {
		属性1: 属性值1;
		...
}

<div class='red'> 变红色 </div>

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。

<div class='red  one'> 变红色 </div>

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。id 属性只能在每个 HTML 文档中出现一次。

//语法
#id名 {
 		属性1: 属性值1; 
 		...
}

#nav {
 color:blue;
}

id 选择器和类选择器的区别

//语法
* {
 		属性1: 属性值1; 
 ...
}

注意：通配符选择器不需要调用，自动就给所有的元素使用样式。

基础选择器总结