html - 无法更改 html 的相邻选择器 css

Question

我正在尝试选择子菜单 #submenu3.0 或 #submenu3.1 中的一项 但由于它们不是唯一的，我尝试将它们与相邻的选择器连接起来。重写 html 代码是不可能的

#menu_member_personal + #subMenuContainer3 > #submenu3.0
{ color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu3" class=" menu" style="cursor: pointer;">
	<span class="menuBullet"></span>
	<span id="menu_member_personal" class="menuText menuTextActive">Personal</span>
	<script>menuCount++;</script>
	<ul id="subMenuContainer3" class="subMenuContainer" style="overflow: visible;">
		<li id="submenu3.0" class="firstSubMenu subMenu" linkurl="#" style="cursor: pointer; width: 260px;">
			<span class="subMenuBullet"></span>
			<span class="subMenuText subMenuTextActive">Profile</span>
			<script>$('submenu3.0').addClassName('firstSubMenu');</script>
		</li>
		<li id="submenu3.1" class=" subMenu" linkurl="#" style="cursor: pointer; width: 260px;">
			<span class="subMenuBullet"></span>
			<span class="subMenuText">Messages</span>
		</li>
		<li id="submenu3.2" class=" subMenu" linkurl="#" style="cursor: pointer; width: 260px;">
			<span class="subMenuBullet"></span>
			<span class="subMenuText">Contacts</span>
		</li>
	</ul>
</li>

如何正确编写一个选择器，使其工作并绑定(bind)在一个唯一的 id="menu_member_personal"

Answer 1

您可以使用 #menu_member_personal ~ #subMenuContainer3 > li:first-child 或 #menu_member_personal ~ #subMenuContainer3 > #submenu3\.0。 ~ 而不是 + 因为两个元素之间有一个 script。

#menu_member_personal ~ #subMenuContainer3 > #submenu3\.0 {
  color: red;
}

<li id="menu3" class=" menu" style="cursor: pointer;">
  <span class="menuBullet"></span>
  <span id="menu_member_personal" class="menuText menuTextActive">Personal</span>
  <script>
    menuCount++;
  </script>
  <ul id="subMenuContainer3" class="subMenuContainer" style="overflow: visible;">
    <li id="submenu3.0" class="firstSubMenu subMenu" linkurl="#" style="cursor: pointer; width: 260px;">
      <span class="subMenuBullet"></span>
      <span class="subMenuText subMenuTextActive">Profile</span>
      <script>
        $('submenu3.0').addClassName('firstSubMenu');
      </script>
    </li>
    <li id="submenu3.1" class=" subMenu" linkurl="#" style="cursor: pointer; width: 260px;">
      <span class="subMenuBullet"></span>
      <span class="subMenuText">Messages</span>
    </li>
    <li id="submenu3.2" class=" subMenu" linkurl="#" style="cursor: pointer; width: 260px;">
      <span class="subMenuBullet"></span>
      <span class="subMenuText">Contacts</span>
    </li>
  </ul>
</li>