Question

例如，我可以通过以下两种方式获得相同的结果。

 <html>

<head>
<style type="text/css">

p#red{color:red}    /* This is a CSS id selector*/

p.green{color:green}   /* This is a CSS class selector*/

</style>

</head>

<body>

<p id="red">red color</p>
<p class="green">greencolor </p>

</body>
</html>

他们都可以给我一个彩色文字。但它们之间的区别在哪里？谢谢你的回答。

Answer 1

ID是唯一的 每个元素只能有一个ID。每个页面只能有一个具有该ID的元素 类不是唯一的 您可以在多个元素上使用相同的类。您可以在同一元素上使用多个类。 More About

Answer 2

id选择器用于指定单个唯一元素的样式。在另一方面 类选择器用于指定一组元素的样式。与id选择器不同，类选择器最常用于多个元素。这允许您为具有相同类的许多HTML元素设置特定样式。

示例： 1）

#para1{
text-align:center;
color:red;
}

- ＆gt;此样式规则将应用于id =＆＃34; para1＆＃34;（如果找到多个具有相同ID样式规则的元素将仅应用于第一个元素。

示例2）

 .center {text-align:center;}
 p.center {text-align:center;}

- ＆gt;此样式规则将应用于具有类＆＃39; center＆＃39;的所有元素。第二条规则将适用于所有＆＃34; P＆＃34; class = center。

Answer 3

对于HTML ID是唯一的，Class是可重用的。

对于CSS，ID等于256 Class。所以你需要256级来覆盖ID的风格。以下是示例：http://codepen.io/chriscoyier/pen/lzjqh

CSS id选择器和CSS类选择器之间的区别是什么？

3 个答案: