多次重用同一個類但使用不同樣式的做法不好嗎？

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類的籠統聲明更加籠統。 ;）