如何使用CSS單獨設計表單元素（無javascript）

我正在編輯事件註冊網站上的模塊。它有一個控制表單的CSS條目。條目很簡單如何使用CSS單獨設計表單元素（無javascript）

#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"; 
}

您怎麼看？我正在嘗試像專業人員那樣做！

感謝，布賴恩

2015-02-10 Brian

你能改變HTML結構嗎？ – LinkinTED 2015-02-10 10:40:27

是的，我可以靈活地編輯CSS和HTML，但我試圖在CSS中做很多事情。而我忘了提及的是，我正在編輯的元素已經嵌套在其他具有現有類/標識符的div中了......所以，如何在CSS中指定選擇真的很麻煩。 – Brian 2015-02-10 10:51:56

好吧，如果你不想觸摸HTML結構，我們需要確切的結構給你一個特定的答案。否則，給定的解決方案可能會被另一段代碼覆蓋。 – LinkinTED 2015-02-10 10:56:54

中添加更多細節。這將佔用大量的空間去展示結構，但你可以看到這種形式，因爲我編輯它：

你可以明白我的意思有關現有類叢生，IDS。我注意到以下幾點：允許我設置單個元素的樣式：

其中#field已由我正在編輯的事件註冊組件定義。所以我想這是一個解決如何定義註冊表單組的類然後選擇類/現有ID的問題。

2015-02-10 11:15:23 Brian

回答