Question

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

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

请参阅此小提琴，了解简化版https://jsfiddle.net/jc8o0ymL/2/ 两个内盒都是绿色的。

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

这里的第二个小提琴https://jsfiddle.net/bk3qbpdk/1/

使用相同的ID（第三小提琴：https://jsfiddle.net/z1zsrrhg/）有效，因为应用了样式标记但是将页面中的最后一个样式附加到所有元素的问题相同，所以它不使用＃是问题。

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

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

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

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

css需要

.Parent:hover div.Popup { do stuff }

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

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

只有它不起作用，第二小提琴。

我不知道为什么这不起作用。它是页面样式的怪癖，是否符合标准？或者我有什么问题，是否有修复？

Answer 1

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

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

＆＃13;

div{
  width: 100px;
  height: 70px;
  border: 1px solid black;
  float: left;
  margin-right: 10px;
}

.ex1{
   background-color: green;
}

#ex2{
   background-color: blue;
}

＆＃13;

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

＆＃13;

Answer 2

这样的重复样式声明最终会忽略其中一个。同样，虽然类声明可以以数字开头，但您不能使用ID。请注意，我将您的外部div ID从#1更改为#outer1，将#2更改为#outer2。

.outer{
  width:100px;
  height:100px;
  background-color:blue;
}
.inner{
  width:50px;
  height:50px;
  margin:10px;
}

<style>#outer1 div.inner{background-color:red}</style>
<div id="outer1" class="outer">
  content
  <div class="inner">
    more content
  </div>
</div>

<style>#outer2 div.inner{background-color:green}</style>
<div id="outer2" class="outer">
  content
  <div class="inner">
    more content
  </div>
</div>

Answer 3

如果您可以修改标记，请使用不同的类来修改每个元素。

<style>
  .outer {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .inner {
    width: 50px;
    height: 50px;
    margin: 10px;
  }
  .inner--red {
    background-color: red;
  }
  .inner--green {
    background-color: green;
  }
</style>

<div class="outer">
  content
  <div class="inner inner--red">
    more content
  </div>
</div>

<div class="outer">
  content
  <div class="inner inner--green">
    more content
  </div>
</div>

如果您无法修改标记，请使用伪类。

<style>
  .outer {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .inner {
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: red;
  }
  .outer:nth-of-type(2) .inner {
    background-color: green;
  }
</style>

<div class="outer">
  content
  <div class="inner">
    more content
  </div>
</div>

<div class="outer">
  content
  <div class="inner">
    more content
  </div>
</div>

Answer 4

ID 应该是唯一的，只需更改名称即可：

<style>#outer2 div.inner {background-color:green;}</style>
<div id="outer2" class="outer">
[...]

但问题更多的是关于浏览器渲染风格，请查看此答案。值得一读：

How is CSS applied by the browser, and are repaints affected by it?

<强>更新

ID 无法以数字（html4规格）

开头

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

更多信息：https://www.w3.org/TR/html4/types.html#type-id

小提琴：https://jsfiddle.net/2k7c0qto/

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

4 个答案: