html - 如何将页面样式应用于不同的div

Question

我需要在提供页面时动态应用样式，因为我没有将样式直接应用到我使用页内元素的元素 <style>行。

但是，这会将最后看到的样式应用于页面上的所有元素。我试图通过唯一标识元素来解决这个问题，但这似乎阻止了标签的工作。

请参阅此 fiddle 以获得简化版本 https://jsfiddle.net/jc8o0ymL/2/两个内框都是绿色的。

如果我在将 # 样式附加到标签时尝试使用 ID 将它们分开，它们将停止工作。

第二 fiddle 在这里 https://jsfiddle.net/bk3qbpdk/1/

使用相同的 ID(第三个 fiddle :https://jsfiddle.net/z1zsrrhg/)是有效的，因为应用了样式标签，但存在将页面中的最后一个样式附加到所有元素的相同问题，因此它没有使用 # 那是问题。

为什么这不允许唯一 ID 引用？不，将样式添加到外部样式表并不是我要找的答案。

[编辑]好的，我可以看到更多信息，因为答案集中在我已经知道的 CSS 样式上。

实际行为是允许 div 内的 div 在悬停时“弹出”(仅使用 CSS，而不是 javascript)，因此我需要将样式添加到父 :hover 元素。这就是为什么我不能将类直接应用于受影响的元素。

<div id="1" class="Parent">
<div class="Popup"></div>
</div>

css 需要

.Parent:hover div.Popup { do stuff }

HTML 由 PHP 对象生成。因此，当该对象在同一页面上被调用两次时，它会产生我的第一个 Fiddle 中描述的场景。

一切正常，但这意味着页面上所有元素的弹出数量需要相同。我希望他们能够与众不同。因此我想为每个元素添加一个(唯一的)ID 并引用它。每次调用该对象时，它都可以输出一个页面内样式，该样式对于它要创建的元素是唯一的。

只是它不起作用，第二个 Fiddle。

我不知道为什么这行不通。它是页内样式的怪癖，它在标准中吗？还是我出了什么问题，有解决办法吗？

Answer 1

如果您希望多个元素共享相同的 css 规则，您应该使用 class 属性。

如果您使用 ID，则在 css 中的 ID 前添加 #。在任何情况下，都不要多次使用一个 ID，它必须是唯一的。

div{
  width: 100px;
  height: 70px;
  border: 1px solid black;
  float: left;
  margin-right: 10px;
}

.ex1{
   background-color: green;
}

#ex2{
   background-color: blue;
}

<div class="ex1">
 </div>
<div class="ex1">
 </div>
<div id="ex2">
 </div>