CSS 选择器说明答案

【问题标题】：CSS Selectors ExplanationCSS 选择器说明
【发布时间】：2022-02-01 11:55:08
【问题描述】：

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

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

另一个例子，我想在绿色文本中显示“12 三文鱼”和“3 cod”，在蓝色文本中显示“46 halibut”和“13 polllock”？在我知道有一个使用非常具体的选择器的技巧，但我不知道如何。

 <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>```

【问题讨论】：

您可以为此使用tree structural pseudo classes。不过，我推荐class 属性。毕竟，太平洋鱼应该是绿色的，还是 ul 中的第一个 li？您不必“包装”任何东西；将类添加到现有元素之一
除了类更具可读性之外，树结构选择器是维护的痛苦。如果你改变了你的树结构... pain.
绝对是一种痛苦。这个问题出现在课堂测验中，我被难住了——我不认为这个问题是为了最佳实践！
请注意，有时您别无选择 - 例如，在制作针对您无法控制的网页的浏览器扩展程序时。
很有趣，谢谢。我是新手（在学习 html/css 的第 3 周），所以我对我能获得的所有信息持开放态度。

标签： html css css-selectors

【解决方案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;}

【讨论】：

非常感谢！！！我正在绞尽脑汁……这行得通。谢谢！

【解决方案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 样式表中完成的。它仅使用 JS 在 DOM 级别上完成，并且与第 1 篇文章中的 HTML 相关。