css - 如何使用 CSS 单独设置表单元素的样式(无 javascript)

Question

我正在编辑网站上的一个事件注册模块。它有一个控制表单的 CSS 条目。入口很简单

#component .component_form input {border:1px solid #ccc; padding:3px;}

我需要做的是对表单元素进行分组并分别设置其中一些元素的样式。因此，您可以想象一个包含联系信息、工作信息等部分的表单。在表单中，这些部分将是 block ， block 的顶部将具有部分标题，然后每个元素的大小将由类，但也有一些元素必须与类中的其他元素不同。从概念上讲，我认为这将涉及创建类和 ID。也许是这样的？

  #component .component_form .contact_info input {properties}
  #component .component_form .contact_info #firstname input {properties}

等等

我走在正确的轨道上吗？

那我会做这样的事情吗？

<div class = "contact_info">
<input class = "contact_info" id = "firstname"...></input>
<input class = "contact_info" ...></input>
...
</div>

让我对 CSS 感到困惑的是，当您拥有这些现有的级联关系并且知道如何正确地创建新的类/id 并将它们适合现有的级联，然后在 html 中正确地选择它们时。

虽然我知道人们说的是单独的样式和内容，但我什至想让 CSS 为每个组指定一个标题(联系信息等)。也许做这样的事情？

#component .component_form .contact_info div:before {
  content: "Contact Info";
}

你怎么看？我正在尝试像专业人士那样做!

谢谢，布莱恩

Answer 1

添加更多细节。显示结构会占用很多空间，但您可以在我编辑它时看到这个表格:

http://dev.pfp-consortium.org/index.php/events/1-regional-stability-in-the-south-caucasus-workshop/registration

您可以理解我所说的大量现有类、id 的意思。我确实注意到以下内容:允许我设置单个元素的样式:

input#field {width:50px}

#field 已经由我正在编辑的事件注册组件定义。所以我想这是一个弄清楚如何为注册表单组定义类然后选择类/现有 ID 的问题。