基础选择器

标签选择器

概念：标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1：属性值1；属性2：属性值2；}
直接选择所有h1标签设置字体颜色为红色：

	
	
	
	


	
我是胡萝卜


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

类选择器

类选择器使用"."（英文点号）进行标识，后面紧跟类名
语法：

• 类名选择器

.类名{
	属性1:属性值1;
	属性2:属性值2;
}
1
2
3
4

• 标签

1

• 注意
  类选择器使用"."（英文点号）进行标识，后面紧跟类名
  长名称或词组可以使用中横线来为选择器命名
  不要纯数字、中文等命名，尽量使用英文字母来表示。

	
	
	
	


	
我是胡萝卜


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

类选择器特殊用法-多类名

一个标签可以拥有多个类名

class=“类名1 类名2”

	
	
	
	


	G
	o
	o
	g
	l
	e


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

id选择器

id选择器使用#进行标识，后面紧跟ID名

• 其基本语法格式如下

#id名{属性1:属性值1;属性2:属性值2;}

 
1

元素的id是唯一的，只能对应于文档中某一个具体的元素
用法基本和类选择器相同

	
	
	
	


	
我是胡萝卜


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

通配符选择器

• 概念

通配符选择器用*号表示，*就是选择所有的标签，它是所有选择器中作用范围最广的，能匹配页面中所有元素。

• 基本语法格式

{属性1:属性值1;属性2:属性值2;}

例如以下代码，使用通配符选择器定义CSS样式，清除所有HTML标签的默认边距

*{
	margin:0;
	padding:0;
}
1
2
3
4

	
	
	
	


	
胡萝卜
	我是胡萝卜
	
透明的胡萝卜


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用