HTML将样式应用于CSS中的多个div

Question

我正在尝试将CS​​S样式应用于多个div元素，如以下HTML代码所示：

{% for i in player_range %}
<div id="container-frame-{{ i }}"
...
</div>
{% endfor %}

i的值是可变的，并且从我的软件的Python端传递到HTML。

以下是我想为每个元素应用的CSS样式。

#container-frame-0{
   border-style: solid;
   border-width: 5px;
   border-color: green;
}

我试图将i的不同值（例如0、1,2等）硬编码为容器框架样式，并且工作正常。 但是，我正在寻找一种更清洁的方法。

理想情况下，我正在寻找这样的东西：

#container-frame-{{i}}{
   border-style: solid;
   border-width: 5px;
   border-color: green;
}

我和HTML一样。 知道怎么做吗？

Answer 1

给div一堂课。 使用类选择器。

<div id="container-frame-{{ i }}" class="container-frame"

.container-frame {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}

---

您也可以使用属性选择器 。

[id^="container-frame-"] {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}

Answer 2

使用@Quentin方法或在CSS中使用此选择器：

div[id^="container-frame-"]{ ... }

Answer 3

将类用于多个元素，因为id仅用于on元素

<div class="myClass"></div>
<div class="myClass"></div>

在CSS中：

.myClass{
            border-style: solid;
            border-width: 5px;
            border-color: green;
}

Answer 4

因此，您当前的代码无法正常工作，因为id只能应用于一个元素。 尝试给每个div一个类，然后像这样设置它们的样式：

/* Notice use of dot instead of hash */
.whatever-name-you-want {
   border-style: solid;
   border-width: 5px;
   border-color: green;
}

您可以在这里阅读： https : //www.w3schools.com/css/css_syntax.asp

Answer 5

正如其他人提到的，您可以使用一个类，但也可以使用属性选择器。

 div[id^="container-frame-"], div[id*=" container-frame-"] {
    border-style: solid;
     border-width: 5px;
     border-color: green;
 }

请参阅此问题以获取更多详细信息： CSS中的通配符*用于类