文章/答案/技术大牛

发布

社区首页 >问答首页 >EJS :将样式添加到无穷大中，以便按id在列表中执行项

问EJS :将样式添加到无穷大中，以便按id在列表中执行项
EN

Stack Overflow用户

提问于 2022-06-23 05:27:26

回答 1查看 23关注 0票数 1

我试图添加样式到我的网页上的要做的项目使用他们的id字段。

<body>
<h1><%- dayType %></h1>
<ul class="tasks">
    <% for(i = 0 ; i < data.length ; i++){ %>
        <input id='label-<%-i+1%>' type='checkbox'/>
        <label for="label-<%-i+1%>"><li><%- data[i] %></li></label>
    <% } %>
    <li>
        <form action="/" method="post">
            <input type="text" placeholder="Enter To Do Item" name="items">
            <input type="submit" value="Submit">
        </form>
    </li>
</ul>

在我使用for循环的代码中，有一个复选框和标签，我要在其中添加样式。我的css看起来如下：

#label-1:checked ~ label[for=label-1],
#label-2:checked ~ label[for=label-2],
#label-3:checked ~ label[for=label-3],
#label-4:checked ~ label[for=label-4],
#label-5:checked ~ label[for=label-5]{
  background: #6d335c;
  border-bottom: 1px solid #34495E;
  color: #d37b79;
}

当选中要做项的复选框时，相应的do项的样式将被更改。但是，我只能更改数量有限的要做项目的样式，因为在css中，我们必须为每个要做项的id硬编码样式。我希望网站输入尽可能多的项目和他们的复选框运行完美。如何做到这一点？

javascript

css

ejs

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-23 05:54:30

您可以使用选择器，它将选择以指定字符串开头的属性为属性的所有元素。

[attr^=value]

请参阅MDN

就你而言：

*[id^="label-"]:checked ~ label[for^="label-"]{
  background: #6d335c;
  border-bottom: 1px solid #34495E;
  color: #d37b79;
}

但是，除非有理由必须按id区分这些元素，否则我建议您使用一个类。然后，您可以绝对确定您得到的是正确的元素集。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72724947

复制

相似问题

问EJS :将样式添加到无穷大中，以便按id在列表中执行项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问EJS :将样式添加到无穷大中，以便按id在列表中执行项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问EJS :将样式添加到无穷大中，以便按id在列表中执行项
EN