如何使用CSS單獨設置表單元素的樣式（無JavaScript）

Question

我正在編輯網站上用於事件注冊的模塊。 它具有控制表單的CSS條目。 條目很簡單

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

我需要做的是對表單元素進行分組並分別對其中一些元素進行樣式設置。 因此，您可以想象一個表單，其中包含諸如聯系信息，工作信息等部分。在表單中，這些部分將是塊，其中塊的頂部將具有部分標題，然后每個元素的大小都將由類，但某些元素必須與該類中的其他元素不同。 從概念上講，我認為這將涉及創建類和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";
}

你怎么看？ 我正在嘗試像專業人士那樣做！

謝謝，Brian

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的問題。