使用CSS维护ID属性更改

Question

假设我有一个ID属性，因此使用CSS定位ID非常简单：

<style>
#idAttr { color: #a2a2a2 }
</style>

如何维护我的CSS，以便它可以面向未来？如果将来ID属性会更改，例如＃idAttr2。无需为此属性编写代码就可以做到这一点？

Answer 1

在这种情况下，可能不适合使用ID选择器。问题是您将某些您认为不应更改的内容（元素的样式）绑定到您认为可能更改的内容（元素的ID）上。

由于样式不应更改，因此应将其绑定到不应更改的内容。如果您需要ID能够更改，则还应该为元素提供一个不应更改的类，然后在其上放置样式。

Answer 2

在CSS中，您有一个选择器可能对此有所帮助。

div[id^="t-"] {
    background: #ffff00;
}

这将选择所有以t-开头的ID，例如t-5555-5505-5555

在许多情况下，最佳实践是使用类对元素进行样式设置，但我不知道您将其用作什么。

Answer 3

使用CSS Class Selector

#id1
{
 color: red;
}

#id2
{
 color: green;
}

.span-style
{
 border: solid 1px gray;
}

<span id="id1" class="span-style">My id is id1 and have a common span-style</span>
<br />
<br />
<span id="id2" class="span-style">My id is id2 and have a common span-style</span>