Html CSS动态Id目标

我正在开发一个没有javascript的应用程序。这个概念不是js

所以我有评论部分要回复

这是按钮

<a href='#reply1'>
   Reply button
</a>

答复表格

<form id='reply1'>
  <p>
    A reply form
  </p>
</form>

答覆表格

这是我的风格

<style>
  #reply1 {
    display: none;
  }

  #reply1:target {
    display: block;
  }
</style>

#答复1{
显示：无；
}
#答复1：目标{
显示：块；
}

目前它工作得很好，当我点击回复按钮时，回复表单就会显示出来

但在我的情况下，id将是动态的。每个表单都有不同的id，每个表单都有一个与表单id相同的按钮

---

我听说它可以通过css wilcard或其他方式实现。我不知道怎么做。有人能帮我完成吗？

您需要使用

class

属性

<style>
  .reply {
    display: none;
  }

  .reply:target {
    display: block;
  }
</style>

---

在上面的示例中，回复css将同时添加到

id=“reply1”

和

id=“reply2”

您需要使用

class

属性

<style>
  .reply {
    display: none;
  }

  .reply:target {
    display: block;
  }
</style>

在上面的示例中，回复css将同时添加到

id=“reply1”

和

id=“reply2”

中

如果要将样式应用于多个元素，则可以选择类选择器

。回复表单{
显示：无；
}
.答复形式：target{
显示：块；
}

答复表格1

答复表格2

答复表格3

试试这个

如果要将样式应用于多个元素，则可以选择类选择器

。回复表单{
显示：无；
}
.答复形式：target{
显示：块；
}

答复表格1

答复表格2

答复表格3

您可以使用类并利用它来设置更改的样式您可以使用类并利用它来设置不需要的更改的样式。盖伊提出了100多个问题，接受了其中一半以上的答案。除非用户是新用户，否则要求接受答案通常是不礼貌的。你不需要这样做。盖伊提出了100多个问题，接受了其中一半以上的答案。除非用户是新用户，否则要求接受答案通常是不礼貌的。