适当的时候使用复杂的css选择器

Question

我发现自己从不使用像x + y，x＆gt;这样的高级选择器。 y，x~y等因为我不知道何时使用它。如果我想实现那些，那么我的开发速度会变慢，因为我不擅长制作捷径。

例如。为什么在列表中使用x + y而不是x y？或者直接选择id或class。

Answer 1

如果您不知道何时使用它，请不要。作为一般经验法则，如果它使您的开发变慢并且您不理解它的目的，请不要这样做。具体来说：

x y

表示选择嵌套在y

中的任何x

x + y

表示选择y

之后的任何x

x > y

表示选择y

的直接子项的任何x

x ~ y

表示选择y

之后的任何x

Answer 2

那些高级选择器（x> y，x + y，x~y）在某些情况下非常有用，因为它们比x y更具体。一些例子：

1. x＆gt; ÿ

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

要做到这一点而没有相邻的选择器（'+'），你必须在标题后的每个第一段添加一个类，这可能会让一篇长篇文章感到厌倦。