左邻域选择器

使用 CSS 不可能使用选择器选择前一个邻居。甚至在撰写本文时的CSS4 草案也没有此功能。

所以是的，只是

1. 通过对应元素的类。只需手动将类添加到标记中。
2. 伪nth-child类等，如果合适的话。

3. 反转标记（在标记中以相反的顺序排列元素）并应用 flexbox。

   我们可以通过row-reverse/column-reverse或通过属性反转元素order。

   假设有元素first和second。并且需要在firstbefore时添加选择器second。为此，您需要交换它们，然后应用选择器second + first。

   第一种方式（首选）：然后分配给容器flex-direction: row-reverse;或flex-direction: column-reverse;取决于标记：

   .flex {
     display: flex;
     flex-direction: row-reverse;
   }
   
   .second + .first {
     color: red;
     margin-right: 10px;
   }

   <div class="flex">
     <div class="second">
       Second
     </div>
     <div class="first">
       First
     </div>
   </div>

   第二种方式：然后order second少做first：

   .flex {
     display: flex;
   }
   
   .second + .first {
     color: red;
     margin-right: 10px;
   }
   
   .second {
     order: 2;
   }
   
   .first {
     order: 1;
   }

   <div class="flex">
     <div class="second">
       Second
     </div>
     <div class="first">
       First
     </div>
   </div>

4. 通过 JavaScript。通过 JavaScript 添加类或 CSS 属性。

由于这个问题没有说明交互性，我假设您只需要为隐藏嵌套菜单的所有链接着色。使用当前标记，这很容易做到，因为链接要么在最后，要么后面有一个 ul。

a:link, a:visited, a:hover, a:active {
  color: red;
}

a:last-child:link, a:last-child:visited, a:last-child:hover, a:last-child:active {
  color: blue;
}

a:hover, a:active {
  opacity: .5;
}

<ul>
  <li><a href="javascript://">Пункт 1</a></li>
  <li><a href="javascript://">Пункт 2</a></li>
  <li><a href="javascript://">Пункт 3</a></li>
  <li><a href="javascript://">Пункт 4</a>
      <ul>
        <li><a href="javascript://">Пункт 1</a></li>
        <li><a href="javascript://">Пункт 2</a></li>
        <li><a href="javascript://">Пункт 3</a></li>
        <li><a href="javascript://">Пункт 4</a></li>
      </ul>
  </li>
</ul>

左边有这样一个选择元素的机会：

最重要的是，使用容器的display: flex;和 属性flex-direction: row-reverse;，您可以反转元素的顺序，然后右侧元素的所有 css 高亮将突出显示左侧元素。

少/萨斯：

  .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .elem {
    background: red;
    width: 48px;
    height: 48px;
  }
  .elem:hover, .elem.active {
    background: blue;
    & ~ .elem {
      background: blue;
    }
  }

CSS:

  .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .elem {
    background: red;
    width: 48px;
    height: 48px;
  }
  .elem:hover {
    background: blue;
  }

  .elem:hover ~ .elem {
      background: blue;
  }