CSS 选择器说明

Question

我真的很困惑如何在不更改以下 HTML 或将其包装在 class 名称的情况下设置此列表的样式。我该怎么做？

例如，如果我想将 Ocean Fish 加粗但不影响太平洋或大西洋，我如何在不添加 class 名称的情况下定位 div？

另一个例子，我想要绿色文本的“12 条鲑鱼”和“3 条鳕鱼”，以及蓝色文本的“46 条大比目鱼”和“13 条鳕鱼”？在我知道有一个使用非常具体的选择器的技巧，但我不知道如何。

 <ul>
   <li>
     <div>Ocean Fish</div>
     <ul>
       <li>
         <div>Pacific</div>
         <ul>
           <li>12 salmon</li>
           <li>3 cod</li>
         </ul>
       </li>
     </ul>
     <ul>
       <li>
         <div>Atlantic</div>
         <ul>
           <li>46 halibut</li>
           <li>13 pollock</li>
         </ul>
       </li>
     </ul>
   </li>
 </ul>```

Answer 1

如果您想在没有类的情况下这样做，这将处理您的所有情况。

body > ul > li > div{font-weight:bold;}
body > ul > li > ul:nth-child(2) > li > ul{color:green;}
body > ul > li > ul:nth-child(3) > li > ul{color:blue;}

Answer 2

与上一个答案类似的方法，但更直接：

 let divSel = document.querySelectorAll('div');  // alert(divSel.length);
 divSel[0].style.fontWeight = 'bolder';

 let liSel = document.querySelectorAll('li');
 liSel[2].style.color = 'green';
 liSel[3].style.color = 'green';
 liSel[5].style.color = 'blue';
 liSel[6].style.color = 'blue';

如果更改了入场顺序，修改起来仍然很痛苦。

CSS 选择器说明

CSS Selectors Explanation

html

css

css-selectors