html - 为什么对多个元素使用 Class 而对一个元素使用 ID?

标签 html css

<分区>

我知道您应该对多个元素使用类,对单个元素使用 ID。

但是它们都可以用于多个元素。

那么这两个元素(class 和 id)在它们实际可以做的事情(相对于它们应该做的事情)方面是否相同?还是我遗漏了什么

例如,我创建了类和 ID,并将它们都应用到我的 fiddle 上的多个元素:http://jsfiddle.net/4qyoyfwq/ (编码如下):

#blueid {
    color:blue
}
.greenclass {
    color:green
}

p#purple {
    color:purple
}

p.yellow {
    color:yellow
}
<p id="blueid">Hey! I am blue id</p>
<p class="greenclass">I am green class</p>
<b id="blueid">Yup, also blue id!</b>
<br />
<br />
<b class="greenclass">Yet I am green class</b>
<br />
<p id="purple">I am purple id</p>
<p class="yellow">I am yellow class</p>

那么为什么是两种不同的类型呢?

最佳答案

ID 有一个更大的 specificity比类(100 对 10)

这意味着如果我有一个带有 id="test"和 class="test"的元素,#test 类规则将覆盖 .test 规则

所以在下面的例子中:

<div id="test" class="test">test</div>

#test {
  color: red
}

.test {
 color: blue;
}

文本将是红色的 - 即使 .test 类稍后出现在 css 文件中

关于html - 为什么对多个元素使用 Class 而对一个元素使用 ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27382989/

上一篇:html - 如何在响应式布局中垂直对齐图像而无需绝对定位

下一篇:css - 如何在固定高度的 div 中保持漂亮的 Logo ?

相关文章:

html - 两列布局中第一列的 CSS 省略号

html - 设置 div 的固定尺寸而不依赖于显示它的设备

html - CSS:类似 Youtube 的视频页面布局

html - flexbox 在 iOS 上不工作(排序)

javascript - createTextNode 用不需要的引号包围我的选择列表

c# - 在 ASP.NET MVC 解决方案中从我的域对象重构表示代码的最佳方法是什么?

javascript - 无法更改 <a> 中 <span> 中的已访问颜色

javascript - 视频播放完后添加一个 div 来替换视频

html - 悬停下拉菜单

php - 将HTML代码应用于php数组的每个元素的方法