三、选择器
就是指定CSS要作用的标签,那个标签的名称就是选择器。每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
1.HTML标签选择器
2.class选择器
在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。例如我们希望多个div区域中一个区域以及span区域中一个区域一样样式,我们可以设置如下:
.name {color:blue;}代码放在头文件的style标签中
下面代码放在body中
<div class=”name”>div区域一</div>
<span class=”name”>span区域二</span>
而我们想让一个div区域里面第一和第三块区域不一样样式,我们可以设定如下:
下面代码放在头文件的style标签中
div.d1 {color:orange;}
div.d3 {color:green;}
下面代码放在body中
<div class=”d1”>区域一</div>
<div class=”d3”>区域三</div>
3.id选择器
与class选择器类似,但格式不同,选择器的名称为:#id值。
小结:在定义的中,多个标签的class属性值可以相同,而id值要唯一,所以当要设定跨区域具有相同样式,但是同一区域不同样式的时候,我们选择class选择器,而要是设置一个区域具有独立的样式,选择id选择器。
4.关联选择器
实际就是标签中嵌套标签,主要用于要让相同标签中的不同标签显示不同样式
例:我们想让段落中的部分文字具有特殊样式,代码如下:
p b { color:yellow}
<p><b>2009年11月10日</b>北京下了一场大雪</p>
5.组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
span,div { color:white}
<span>2009年11月11日</span>
<div>光棍节快乐</div>
注意:多个不同选择器要用逗号分隔开。
6.伪元素选择器
是指对同一HTML元素的各种状态和其所包括的部分内容。
格式:标签名:伪元素。类名 标签名。类名:伪元素。都可以。例如我们设置a标签的各种不同状态:
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。
如下为我们设置段落的各种不同状态
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。










