4.2 选择器

上一节最后列出了CSS的语法规则：
选择器{
    背景颜色:红色;
    字体大小:23像素;
}
选择器决定了规则将作用于哪些元素上，为了便于展示效果，我们介绍一种简单的CSS规则，color:red，这表示颜色为红色。

1.元素选择器
按元素名，整个html页面所有此类元素都生效
<style>
p{
    color:red;
}
</style>
<p>
    我是p元素
</p>
<span>我是span元素</span>
<div>
    我是div元素
    <p>
        我也是p元素
    </p>
</div>
<p>
    我也是p元素
</p>
此页面所有p元素都是红色
下面是dreamweaver的具体步骤：
首先选中要增加样式的内容，然后右键点击，选择"CSS样式"-》"新建"，如图所示：
然后在弹出框，第一个下拉框选择标签：
这样第二个下拉框就自动选好要添加样式的标签，如图所示：
点击确定后进入CSS编辑窗口:
编辑完点击应用或者确定，此页面所有p元素都有这个样式啦！

2.类选择器
以点开头，表明接下来是类的名字，而类是指元素的class属性，看下面的例子：
<style>
.abb{
    color:red;
}
</style>
<p class="abb">
    我是p元素，我的class值是abb
</p>
<span>我是span元素</span>
<div class="abb">
    我是div元素，我的class值是abb
</div>
<p>
    我也是p元素，我没有class值
</p>
哪些元素的class值是abb，哪些元素就会遵循第4行的CSS规则。即使这些元素并不是同一种类型。
下面是dreamweaver的具体步骤：
选中要添加样式的内容：
默认就是类，直接在第二个下拉框输入要添加规则的类，这里写的是abb：
确定后弹出css编辑窗口：
随便编辑几个后确定，效果如图所示：
p元素和div元素的class属性都是abb，所以规则在这两处生效

3.id选择器
以#开头，表明接下来是一个id值，id值是所有元素都可以设置的属性，看下面的例子：
<style>
#abb{
    color:red;
}
</style>
<p id="abb">
    我是p元素，我的id值是abb
</p>
<span>我是span元素</span>
<div>
    我是div元素，我没有id值
</div>
<p>
    我也是p元素，我没有id值
</p>
看上去和class的作用机制一样，但是id值是唯一的，如果网页内有相同id值的元素，浏览器的表现可能不一致。