CSS ID选择器与类选择器的区别

最新推荐文章于 2024-04-10 14:12:14 发布

theusProme

最新推荐文章于 2024-04-10 14:12:14 发布

阅读量2.8k

点赞数 9

分类专栏： web 文章标签： css id选择器类选择器

本文链接：https://blog.csdn.net/theusProme/article/details/60955432

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS中ID选择器与类选择器的用法看起来很相似，但是它们有以下两个区别

1.原则上ID选择器只能使用一次，而类选择器可以不限次数使用

<html>
<head>

<style type="text/css">
    #red {color:red;}
    .blue {color:blue;}
</style>

</head>

<body>

<!--原则上id选择器只能用一次，但是现在用两次依然表现正常，为什么呢？-->
<p id="red">这个段落是红色。</p>
<p id="red">这个段落是红色。</p>

<!--类选择器可以无限次使用-->
<p class="blue">这个段落是蓝色。</p>
<p class="blue">这个段落是蓝色。</p>

</body>
</html>

表现结果

这里写图片描述

可以看到，id选择器即使使用两次依然表现正常，什么情况这是？

其实这样写，在css里是可以的。但如果页面涉及到js，就不好了。因为js里获取DOM是通过getElementById，而如果页面出现同一个id几次，这样就获取不到了。所以id要有唯一性。

最后，成熟网站里，你很少看到css里用id选择器的，都是用class，id选择器留给写js的人用，这样避免冲突。

[引自百度知道]

2.一个标签可以使用多个类选择器，但只能使用一个ID选择器

<html>
<head>

<style type="text/css">
#red {color:red;}
#small {font-size:10px}
.blue {color:blue;}
.big{font-size:30px}
</style>

</head>

<body>

<p id="red">这个段落字体是红色。</p>
<p id="small">这个段落字体比较小。</p>
<p id="red small">这个段落字体又红又小。</p><!--不行的-->

<p class="blue">这个段落字体是蓝色。</p>
<p class="big">这个段落字体比较大。</p>
<p class="blue big">这个段落字体又蓝又大。</p><!--没问题-->

</body>
</html>