Question

首先我意识到ID应该是唯一的。但是现在我对此无能为力。我有一个生成ID名称的javascript插件，对于一个页面，它工作得很好。问题在于创建另一个页面，它将使用相同的命名约定重新开始。例如：

第1页

<ul id="1">

第2页

<ul id="1">

因此，如果我尝试在第1页上设置样式ul＃1，它也将在第2页上设置ul＃1样式。那么，有关如何分离这两个id的任何建议吗？这个html是由JS生成的，否则我只会附加一个类。

感谢。

Answer 1

首先，唯一ID建议仅限于页面。在不同的页面上拥有多个ID是完全正常的。解决此问题的最佳方法是向body添加ID。

<强>第1页

<body id="Page1">
    <ul id="1">
        <li></li>
    </ul>
</body>

<强>第2页

<body id="Page2">
    <ul id="1">
        <li></li>
    </ul>
</body>

<强> CSS

#Page1 #1
{
    //Some style for page 1, ID 1
}


#Page2 #1
{
    //Some style for page 2, ID 1
}

Answer 2

你能附上一堂课吗？有一个div或span一些其他元素围绕你的代码进行生成并为其分配一个类。

Answer 3

如果您需要针对相同ID的不同样式，我会说您必须在每个页面上使用不同的样式表，但是当您进行样式更改时，这将很难维护。

或者，您可以将一个类分配给页面的一个UL标记，然后为该类创建一个样式。

Answer 4

首先，插件仍未生成正确的ID，因为 ID不能是数字 。要回答你的问题，试着找出两个页面之间可能不同的一些父元素，可能在这种情况下你可以使用这样的CSS：

#parent ul#1{
  /* styles here */
}

#parent2 ul#1{
  /* styles here */
}

<强>第1页：

<div id="parent">
  <ul id="1">
    ............

<强>第2页：

<div id="parent2">
  <ul id="1">
    ............

所以你需要找出ul的一些父元素，这两个元素在两个页面之间并不常见。这是我脑海中唯一可能无法控制更改id或用类替换它们的可能性，因为它们是由插件生成的。

Answer 5

如果您需要单独设置样式，则需要一些区分它们。如果你不能修改那些标签，你可以使用一些父容器，如：

<div id="parent1">
    <ul id="id1" />
</div>

<div id="parent2">
    <ul id="id1" />
</div>

然后：

#parent1 ul {
    ...
}

#parent2 ul {
    ...
}

另请注意，id无法以您的情况开头的数字开头。你应该考虑切换/修改这个插件。

Answer 6

我通常做的一件事就是在每个页面的主体附加一个类。 <body class="home_section">然后您可以根据该类.home_section ul#1 {}设置样式。