您的位置：首页 > Web前端 > CSS

CSS中id选择器和class选择器

2016-12-23 11:44 447 查看
CSS中对html元素的样式进行控制是通过CSS选择器来完成的，最常用的两种选择器为id选择器和class选择器。

id选择器和class选择器介绍

id选择器：用来为标有特定id的html元素指定特定的样式，html元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。
如下例子：
#para1{
    text-align:center;
    color:red;
}

<body>
    <p id="para1">Hello World！</p>
    <p>这个段落不受该样式的影响。</p>
</body>
上例中第一个<p>就会会被指定为para1样式。

class选择器：用于描述一组元素的样式，html元素通过class属性来设置class选择器，可以用于多个html元素，一个元素也可以有多个class选择器。以"."来定义。
.center{
text-align:center;
}

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>

id选择器和class选择器的区别：

id选择器：由于我们为html元素指定id时，通常要保证id是唯一的(便于js中的getElementById的正常使用)，所以id选择器一般在一个页面中只能被单个的html元素引用。并且不能为一个html元素指定多个id选择器，试想一下，一个html元素怎么可能有多个id。

class选择器：class选择器可以被多个html元素使用，因为元素的class属性没有必要保证唯一性。另外一个html元素也可以有多个class属性值，值之间用","号隔开。如<p class="cls1,cls2"></p>是可以的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航