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

Question

我应该如何使用 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- only #main_content 的情况下使用，但在一些教程中我看到使用 div#main_content 更好，因为它更容易解析。

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

3 回答 3