CSS中id选择器和class选择器

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>是可以的。
  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值