如何正確地使用CSS定位嵌套元素？

Question

這是一個三部分問題。我一直在使用HTML和CSS和用戶創建特定的標籤，以配合我的類或ID例如

<div id="test"> 
    <div id="blah"></div> 
</div> 

這樣做，我會落得的#TEST和#blah CSS選擇做網站了一會兒。

最近我開始看到有人使用#test> #blah來證明#blah位於#test內部。

我試圖適應使用這種格式，但我無法嘗試選擇我的一些元素。

問題Pt1。 在下面的代碼中我將如何定位每個跨度而不必爲每個中間跨度類別創建樣式

我需要爲我的javascript定位的一部分保留跨度ID。我已經嘗試了下面的幾行和其他一些方法，但似乎無法做到。

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sC#.neutral{ 

#wrapper > #content_wrapper > #content_middle > #content_text > #signup_required > .sr > .sc > #.neutral{ 

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc .neutral{ 

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc span.neutral{ 

我的代碼，以幫助顯示我的佈局與div的去除了大部分內容：

<div id="content_wrapper"> 
    <div id="content_top"></div><!-- #content_top --> 
    <div id="content_middle"> 
     <div id="content_text"> 
      <div id="benefits"></div> 
      <div id="signup"> 
      <form name="signup_required" id="signup_required" onsubmit="return false;"> 
       <div class="sr"> 
        <div class="sc"> 
         <label>First Name<br /> 
         <input id="first_name" type="text" onblur="addtick('first_name')"></label> 
         <span id="first_nametick" class="neutral">d</span> 
        </div> 

        <div class="sc">  
         <label>Surname<br /> 
         <input id="surname" type="text" onblur="addtick('surname')"></label> 
         <span id="surnametick" class="neutral"></span> 
        </div> 

        <div class="sc"> 
         <label>Gender<br /> 
         <select id="gender" onblur="addtick('gender')"> 
          <option value="m">Male</option> 
          <option value="f">Female</option> 
         </select></label> 
         <span id="gendertick" class="neutral"></span> 
        </div> 
       </div> 
      </form> 

問題P t2中。什麼是使用CSS的正確的行業標準格式，它是顯示元素如何相互嵌套的格式，或者是我認爲只需按名稱定位每個div或元素的整潔系統的格式。

問題Pt3。使用顯示元素嵌套的格式，是否會對下載速度產生不利影響，因爲有額外的字符和經常重複的代碼行肯定會增加文件大小。

Answer 1

答到Q1在這裏找到：

What does the ">" (greater-than sign) CSS selector mean?

你似乎有孩子組合子的誤解。

其餘問題與最佳實踐有關。我建議您使用盡可能少的代碼來實現預期的結果。

例如...

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc span.neutral{ 

。 。 。沒有必要的時候。 。 。

.sc span.neutral{ 

。 。 。將以較少的代碼實現相同的結果，更具可讀性/可管理性，將導致較小的文件大小，並且將更容易移動元素。