CSS样式之常用选择器

 

CSS样式之常用选择器

一、标签选择器

二、类选择器

三、id选择器

四、后代选择器

五、分组选择器

六、通配符选择器

七、选择器优先级

---

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。要使用CSS 对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。下面介绍几种常用的选择器。

一、标签选择器

• 标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：

标签选择器名{
	声明1;
	声明2;
	...
	声明n;
}

• 示例如下

文字大小36像素并且加粗
文字大小36像素并且加粗

• 输出结果

二、类选择器

• 类选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：

. 类选择器名 {
	declaration1;
	declaration2;
    …
}

• 示例如下：

添加边框且居中显示
添加边框且居中显示

• 输出结果

• 注意事项

 ①class标签属性的属性值不能以数字开头；

 ②class标签属性的属性值可以有多个，每个值之间用空格间隔。

三、id选择器

• id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：

# id选择器名 {
	declaration1;
	declaration2;
    	…
}

• 示例如下：

郑州大学

• 输出结果

• 注意事项

  ①id标签属性的属性值不能以数字开头；
  ②id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

四、后代选择器

• 后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
	declaration1;
	declaration2;
    	…
}

• 示例如下：

	
第一项
	
第二项


	
第一项
	
第二项

• 输出结果

五、分组选择器

• 如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：

选择器1,选择器2,选择器3…{
	declaration1;
	declaration2;
    …
}

• 示例如下：

郑州大学
郑州大学

• 输出结果

六、通配符选择器

• 通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：

*{
	declaration1;
	declaration2;
    	…
}

• 示例如下：

海上生明月，天涯共此时 

• 输出结果

七、选择器优先级

• id选择器优先级最高，标签选择器优先级最低，即：id选择器 > 类选择器 > 标签选择器。示例如下：

span
span
span

• 输出结果