为什么普通的兄弟组合子和相邻的兄弟组合器不能为ul + li & tr + td工作

Question

我是新开发人员，所以我正在通过观看YouTube来练习Html和CSS。

在其中一个教程视频中，导师正在教授高级选择器。在这方面，他给出了相邻的&一般的兄弟姐妹组合器的用法示例。

例: h2 +a {}，h2 ~p {}

当我按上面的方式尝试时，它起了作用。所以，为了练习，我在ul + li，tr ~ td上试了一下，但是没有用。

我能知道原因吗？

​

h2 ~ p {
  color: red;
 }
  ul + li {
  color: purple;
  }

 <h2 class="subtitle">About Me</h2>
    
    <img src="../img/img-1.jpg">
    
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
    <span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. 
    
    Cillum dolore eu fugiat nulla , pariatur:
    
      <ul><!--parent-->
        <li>Excepteur sint occaecat</li><!--first child-->
        <li>My numbered list item</li><!--second child-->
        <li>Nulla excepteur irure</li><!--third child-->
      </ul>
    </p>

​

​

h2 + a {
  color: red;
  }
  tr ~ td {
    color:green;
    }

<h2 class="subtitle" id="subtitle-id">Services</h2>
    
    <a href="http://www.google.com" id="google-link">Click here to go to Google</a>
    
    <table border="1">
      <thead>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
          <td>Dolor</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sit</td>
          <td>Amet</td>
          <td>Consectetur</td>
        </tr>
        <tr>
          <td>Adipisicing</td>
          <td>Elit</td>
          <td>Sed</td>
        </tr>
        
      </tbody>
    </table>

​

Answer 1

兄弟姐妹是具有相同父级的两个元素。

列表项不能是列表的同级，它必须是列表的子项。

表数据单元格不能是表行的同级，它必须是表行的子单元。

A和b是兄弟姐妹

<a></a>
<b></b>

C和d是父母和子女。

<c> <d></d> </c>