適當的時候使用複雜的CSS選擇器

Question

我發現自己從來不使用像x + y，x> y，x〜y等高級選擇器，因爲我不知道何時使用它。如果我想實施這些，我的發展速度就會變慢，因爲我不擅長製作捷徑。

例如。爲什麼在列表中使用x + y而不是x？或者直接選擇id或class。

Answer 1

如果您不知道何時使用它，請不要。作爲一般的經驗法則，如果它讓你的開發變慢，而你不明白它的目的，那麼不要這麼做。具體來說，雖然：

x y 

手段選擇嵌套在一個x

x + y 

指任何y選擇一個x

x > y 

手段後，立即來到任何y選擇任何y這是一個直接的子女x

x ~ y 

手段選擇x

Answer 2

這些先進的選擇之後不能有任何y（X> Y，X + Y，X〜y）是在某些情況下非常有用，因爲它們不僅僅是x y更具體。一些例子：

1. X> Y

   <ul class="nav"> 
       <li> 
        One 
        <ul> 
         <li>Three</li> 
         <li>Four</li> 
        </ul> 
       </li> 
       <li> 
        Two 
        <ul> 
         <li>Five</li> 
         <li>Six</li> 
        </ul> 
       </li> 
   </ul> 
   

   想象一下，你想有下邊距僅爲頂級導航。很常見的情況。就這麼簡單：的

   .nav > li {margin-bottom: 10px} 
   

   代替

   .nav li {margin-bottom: 10px} .nav li li {margin-bottom: 0} 
   

2. X + Y

   <h1>Heading</h1> 
       <p>First paragraph.</p> 
       <p>Second paragraph.</p> 
   

   對於希望第一款有不同的字體風格的一些格式上的原因。簡單，再次：

   h1 + p {font-style: italic;} 
   

要做到這一點不相鄰的選擇器（「+」），你就必須添加一個類的標題後，每首段，這對於一個很長的文章是累人。