CSS选择器

CSS选择器分类

标签选择器

类选择器

ID选择器

群组选择器

全局选择器（通配符选择器）

后代选择器

伪类

标签选择器

p,h1,h2,h3{color:red;}
p{
font_size:50px;
}
h1{font-family:"隶书";}

只需要将相应的标签进行设置

类选择器

为HTML标签添加class属性

<h1 class="red">1</h1>
<p>2</p>
<p class="red">3</p>

通过类选择器来为具有此class属性的元素设置css样式

.red{color:blue;}

同一标签定义多个类，只需要用空格隔开即可

<p class="ys1 ys2"> </p>

对于不同类型元素的同一个名称的类选择器设置不同的样式规则：

p.red{font-size:50px;}
h1.red{font-size:20px;}

ID选择器

ID选择器与类选择器类似，只不过ID选择器#加上ID名称。

为HTML标签添加ID属性

<h1>内容1</h1>
<p id="p1">内容2</p>
<p id="p2">内容3</p>

通过ID选择器来为具有此ID的元素设置CSS规则：

#p1{color:red;}
#p2{color:blue;}

注意：

ID选择器具有唯一性，同一HTML文件下是不可以使用重复ID，不像类选择器。

群组选择器

集体统一设置样式：

对于相同样式的可以使用群组选择器

p,h1,h2,h3{font-size:30px;}
p{
color:blue;
font-family:隶书;
}
h1{color:red;}

注意：

CSS是不区分大小写，但是对于class和id的值是区分大小写的！

全局选择器

所有标签设置样式：

*{
color:blue;
......
}
对整体设置，使用时注意

后代选择器

标签中的标签

<em>内容1</em>
<p><em>内容2</em>内容3</p>

使用后代选择器中间用空格隔开：

p em{font-size：50px;}

对于具有相同标签的想设置某一个：

<p class="cl1"><em>内容1</em>内容2</p>
<p><em>内容3</em>内容4</p>
<p><em>内容5</em>内容6</p>

只想对第一个进行设置

p.cl1 em{font-size：50px;}

注意：

后代选择器相对来说提高了效率，但是，由于其权重和优先级问题，容易产生样式 冲突。

伪类

伪类选择器定义特殊状态下的样式

无法用标签、id、class及其他属性实现

链接伪类

链接的4种状态：

激活状态、已访问状态、未访问状态、鼠标悬停状态

伪类          说明
:link       未访问的链接
:visited    已访问的链接
:hover      鼠标悬停
:active     激活链接

对下面的一个超链接进行链接设置

<a href="thhp://baidu.com" target="_blank">百度</a>

设置格式如下：

<style type="text/css">
a:link{color:blue;}
a:visted{color:red}
a:hover{color:gray}
a:active{color:green}
</style>

注意：

兼容性问题

- IE6及更早版本，支持元素的四种状态

- IE6浏览器不支持其他元素的:hover和:active

# 链接伪类的顺序

:link > :visited > hover > active

说明：

a:hover必须置于a:link和a:visited之后，才生效；

a:visited必须置于a:hover之后，才生效；

伪类名称对大小写不敏感

有很多链接，可以通过class为不同的连接设置

比如相对链接二进行设置,可通过设置class进行定位设置

<a href="链接1">1</a>
<a href="链接2" class="lj">2</a>

a.lj:link
a.lj:visited
a.lj:hover
a.lj:active

总之标签中的标签用空格隔开，标签的类用点隔开标签与其属性值