CSS技术问询：如何选择特定兄弟元素及指定<li>Iquitos Peru</li>标签

嘿，我来帮你把CSS选择兄弟元素和:nth-child的用法彻底搞明白！

CSS里有两种常用的兄弟选择器，对应不同的场景：

• 相邻兄弟选择器（+）：只能选中紧接在目标元素后面的第一个兄弟元素。比如你想选紧跟在<h1>Perú</h1>后面的那个<li class="departamento">，可以这么写：

  #pais h1 + li.departamento {
    /* 这里写你的样式 */
  }
  

• 通用兄弟选择器（~）：能选中目标元素后面所有同层级的兄弟元素。比如如果#pais下<h1>后面有多个<li>，想给它们统一加样式，就用：

  #pais h1 ~ li {
    /* 这里写你的样式 */
  }
  

你之前搞不懂它很正常，很多人一开始都会把它和:nth-of-type搞混，我给你掰明白核心逻辑：

1. 核心规则：:nth-child(n)是根据父元素的子元素整体位置来选的，不管元素标签是什么。也就是说，它先找父元素里的第n个子元素，再判断这个元素是否和前面的选择器匹配，匹配才会生效。
   举个例子：#pais li:nth-child(2)，意思是：找#pais下的第2个子元素，并且这个元素是<li>的话，才会选中它。
2. 常用参数：
   • 数字：比如:nth-child(3)直接选中父元素里的第3个子元素
   • 关键字：odd选奇数位置（1、3、5...），even选偶数位置（2、4、6...）
   • 公式：an+b，比如:nth-child(2n+1)等价于odd，:nth-child(3n)选第3、6、9...个元素
3. 区分:nth-of-type：如果你想针对同标签类型的元素排序，就用这个。比如#pais li:nth-of-type(2)，意思是找#pais下的第2个<li>元素，不管它在父元素里的整体位置是第几个。

我先补全你示例代码的合理结构（注意：HTML规范里<ul>只能包含<li>，所以你的<h1>/<h2>/<h3>最好放在<li>里，不过我先按你给出的结构模拟）：

<ul id="pais">
  <h1>Perú</h1>
  <li class="departamento">
    <ul>
      <h2>Lima</h2>
      <li class="provincia">
        <h3>Lima</h3>
        <ul>
          <li><strong>Ciudades:</strong></li>
          <li>Ancon</li>
          <li>Comas</li>
          <li>Los Olivos</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Iquitos Peru</li> <!-- 你的目标元素 -->
</ul>

针对这个结构，有两种常用的选中方式：

1. 用:nth-child：目标元素是#pais的第3个子元素（第1个是<h1>，第2个是<li class="departamento">，第3个就是它），所以可以写：

   #pais :nth-child(3) {
     /* 这里写你的样式 */
   }
   

   或者更精确地加上标签判断：

   #pais li:nth-child(3) {
     /* 这里写你的样式 */
   }
   

2. 用:nth-of-type：目标元素是#pais下的第2个<li>元素，所以可以写：

   #pais li:nth-of-type(2) {
     /* 这里写你的样式 */
   }
   

如果你的目标元素在其他层级（比如某个departamento的子<ul>里），只需要调整选择器的层级路径就行，比如如果它在Lima provincia的子<ul>里是第5个<li>，那可以写：

#pais .provincia ul li:nth-child(5) {
  /* 这里写你的样式 */
}

内容的提问来源于stack exchange，提问作者Luis