例如，我想在<ul> 列表的第一个<li class="first"> 上做某事。
我编写 CSS：
ul .first{
/*awesome code here*/
}
但是，我还想为我的<div id="content"> 的第一个<p class="first"> 提供一个特定的CSS。
我是这样做的：
#content .first{
/*awesome code here*/
}
如果你没有注意到，我重用了 first 类，为两个完全不同的案例提供完全不同的样式。
【问题讨论】：
标签： css class code-reuse
这对我来说很好，因为当您有意定义结构的第一个项目和段落的外观时。虽然，如果你使用 :first-child 伪选择器会更好，但是两者都会有不同的样式，因为这就是你想要的。
我希望我不会错过这里的大局，但我也想知道在这种情况下您所说的代码可重用性是什么意思？
如果你要使用 ul.first 那么你必须改变你的
<li id="first" 到 <li class="first"
【讨论】：
:first-child，我将在几年内使用它。目前，我有点担心它的兼容性developer.mozilla.org/en/CSS/:first-child#Browser_compatibility
:first-child？你有那么多 IE6 用户需要考虑吗？即使你这样做了，只要它不会破坏不支持它的浏览器中的东西，我仍然会使用它。
您的 CSS 中有错误。
如果您想对ul 中的第一个li 应用规则，假设您具有以下HTML：
<ul>
<li class="first">Something</li>
你的 CSS 应该是这样的
ul .first {
/* Some code here, notice the space above */
}
您的第二个陈述也是如此。通过编写#content.first，您是在说“我的意思是一个对象的id 像content 并且 有first 类”。如果您添加一个空格#content .first，那么您的意思是“我想选择一个具有first 类的对象，并且位于一个分配有ID content 的对象中”。
但要回答您的问题，这不是坏习惯，相反 - 出于语义原因，建议这样做。
【讨论】：
/* */
您应该只在跨元素共享样式时使用这种方法。这实际上是在 CSS 中使用类的原因之一。这样您就不必为不同的元素重复相同的样式。如果您尝试为同一属性应用两个不同的值，则初始值将被覆盖。
例如：
.first
{
color: blue;
color: red;
}
第二种样式将覆盖第一种样式。此外，即使您不覆盖原始属性，您仍然可能会遇到调试样式错误的问题。例如，您有内联元素和块级元素，因此在这些情况下，使用这种方法可能会遇到问题。
更新： 使关于 CSS 类的一揽子声明更加笼统。 ;)
【讨论】：