CSS3的魔法——id选择器和Class选择器

写在前面部分已经简单跟大家说了说CSS中的选择器,那么我们今天来深入了解一下CSS中最基本的选择器id选择器和class选择器 ,如果不明白的同学可以点这里,回顾一下什么是选择器。
ID选择器:
id选择器可以为HTML中指定了id属性的元素节点指定样式属性。
同一个id名称在一个HTML文档中只应出现一次,虽然现在大多浏览器允许id在HTML文档中出现多次,但是若你在使用JavaScript时读取该id名,就会产生错误
例如HTML中:

<p id='id'>p标签定义了id名称</p>

CSS中就应该如下来指定p标签的样式

#id{
    font-size:16px;
    border:1px solid #ccc;
}

注意: ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class选择器:
class选择器可以定义一组元素的样式
class选择器和id选择器不同的是,同名的class可以定义在多个元素中
如HTML中:

<p class='class'>这是一个class样式</p>
<p class='class'>这是一个class样式</p>
<p class='class'>这是一个class样式</p>
<p class='class'>这是一个class样式</p>
<p class='class'>这是一个class样式</p>

CSS中可以用一个class选择器统一定义以上所有的p标签样式

.class{
    font-size:14px;
    color:red;
}

总结:
同名id选择器在整个HTML中只能出现一次
同名class选择器可以在多个HTML元素中使用
id选择器在CSS中的标识为井号 ( # )
class选择器在CSS中的标识为点号 ( . )

发表评论

电子邮件地址不会被公开。 必填项已用*标注