CSS 声明 - 元素类型和 ID 还是只是 ID？答案

【问题标题】：CSS declaration - element type and ID or just ID?CSS 声明 - 元素类型和 ID 还是只是 ID？
【发布时间】：2012-08-03 14:47:48
【问题描述】：

我应该如何使用 CSS 声明？

这边：

div#main_content {
    width: 900px;
    border: 1px solid #CCC;
    margin: 20px 0 20px 0;
    padding: 40px;
    overflow: hidden;
}

或者这样：

#main_content {
    width: 900px;
    border: 1px solid #CCC;
    margin: 20px 0 20px 0;
    padding: 40px;
    overflow: hidden;
}

在 sublime text 2 中，sublime linter 包建议我不要使用 div - 只有#main_content，但在一些教程中我发现最好使用 div#main_content，因为它更容易解析。

你建议我应该使用什么？（我认为在这种情况下，类的结果是相同的）

【问题讨论】：

【解决方案1】：

最好只使用 id。页面上应该只有一个具有给定 id 的元素，因此元素类型是多余的。

忽略元素类型的另一个原因是，如果您决定更改 HTML（可能将 <div> 更改为更语义化的内容，例如 <p> 或 <section>），CSS 选择器仍将匹配。

【讨论】：

【解决方案2】：

将元素类型包含在 ID 中真正有益（我能想到的）的唯一情况是，如果您要将相同的 ID 应用于不同页面上的不同元素类型并希望对它们进行不同的样式设置。

例如，如果您在主页上创建了<header id="main">，而在其他页面上创建了<section id="main">，那么您肯定希望分别使用header#main 和section#main 来设置这两个元素的样式。

如果您的 ID 将应用于所有页面的相同元素类型，那么您的 CSS 中的元素选择器只会增加 CSS 的易读性，如果您想知道您正在设计什么类型的元素.

【讨论】：

【解决方案3】：

没有太大区别，ID 是最快的，所以使用它们，你会没事的，使用 div#id 只是说只有在 div 内时才会影响 id（虽然你可能在某些时候想要这个功能可能有一个类，而不是一个 id）

【讨论】：