您是否有理由在 CSS 中声明带有 ID 的 HTML 选择器？

发布于 2024-12-01 08:33:46 字数 473 浏览 0 评论 0原文

原始版本的编辑版本

声明 div#test 与仅将其声明为 #test 有何不同？我也可以在同一个样式表中声明这两个样式，即

#div test {

}

#test {

}

原始问题

如果我要声明以下样式 div#test 这与引用 div 有什么不同带有 ID test 的 元素，例如

content

EDIT

澄清什么我的意思是，怎么样div#test 与 #test 不同，然后在 div 元素中引用它。

原文

Edited version of the original

How is declaring div#test different to declaring it as just #test? Also can I declare both of the in the same stylesheet i.e.

#div test {

}

#test {

}

Original question

If I were to declare the following style div#test how is that different to referencing a div element with an ID test e.g. <div id="test">content</div>

EDIT

To clarify what I mean is that how is div#test different to just #test and then referencing it in the div element.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可是我不能没有你 2024-12-08 08:33:46

如果每个页面都有全局 css，并且在一个页面上将 #test 添加到 div 元素，而在其他页面上为 p 添加它，那么这是有意义的。在这种情况下，即使 p 具有 id #test，如果使用 div#test 而不是 #test，CSS 规则也不会应用于它。

然而，您可能应该考虑重命名这些冲突的元素，但并不总是可能的（例如，您不是唯一使用 html 和 css 或某些外部插件等的人）。当然，这不是很好的保护，但在某些特定情况下仍然有意义。

回复收藏 0 原文

萌无敌 2024-12-08 08:33:46

因为 id 必须是唯一的。尽管在外部样式表中，它可以让读者知道其适用的元素类型。

回复收藏 0 原文

白鸥掠海 2024-12-08 08:33:46

如果你在 css 中使用 div#test ，它会查找属于 div 且名为 test 的任何 ID，就像你刚刚执行了 #test 一样，它可以应用于任何其他元素。它还增加了您的选择的特异性，并可能帮助那些审查您的代码的人确切地知道您所指的内容。

示例。

#test { margin-top: 10px; }

<ul id="test">
  <li><a href="#">LinkyLink</a></li>
</ul>

div#test { background: blue; }

<div id="test">
    <p>This is jargan!</p>
</div>

希望这会有所帮助。

If you use div#test in your css, it will look for any ID with the name test, that belongs to a div, as if you just did #test, it could be applied to any other element. It also add's specificity to your selection, and could potentially help those reviewing your code know exactly what you are referring to.

Example.

#test { margin-top: 10px; }

<ul id="test">
  <li><a href="#">LinkyLink</a></li>
</ul>

div#test { background: blue; }

<div id="test">
    <p>This is jargan!</p>
</div>

Hope this helps.

回复收藏 0 原文

~没有更多了~