多次重用同一个类但使用不同样式的做法不好吗？

Question

例如，我想对<ul>列表的第一个<li class="first">进行操作。

然后我编写CSS：

ul .first{
    /*awesome code here*/
}

但是然后，我也想给我的<div id="content">的第一个<p class="first">赋予特定的CSS。

我这样做是这样的：

#content .first{
    /*awesome code here*/
}

如果您没有注意到，我first重用该类，以为两种完全不同的情况提供完全不同的样式。

• 以这种方式重用类是否不好？
• 是否有可能导致故障/错误？

Answer 1

我很好，因为当您有意定义结构的第一项和段落的外观时。 虽然，如果使用：first-child伪选择器会更好，但是然后两者都将具有不同的样式，因为这就是您想要的。

我希望我不会在这里错过大局，但我也想知道在这种情况下，代码可重用性意味着什么？

如果要首先使用ul。那么必须更改您的

<li id="first"至<li class="first"

Answer 2

您的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的对象中”。

但是要回答您的问题，相反，这不是一个坏习惯-出于语义原因，建议您这样做。

Answer 3

仅在跨元素共享样式时才应使用此方法。 这实际上是在CSS中创建类的原因之一。 这样一来，您不必为不同的元素重复相同的样式。 如果您尝试为同一属性应用两个不同的值，则初始值将被覆盖。

例如：

.first
{
color: blue;
color: red; 
}

第二种样式将覆盖第一种样式。 同样，即使您不覆盖原始属性，也仍然会遇到调试样式错误的问题。 例如，您具有内联元素和块级元素，因此在这种情况下，使用此方法可能会遇到问题。

更新：使关于CSS类的笼统声明更加笼统。 ;）