相鄰的選擇器CSS無法更改html

我試圖選擇其中一個項目子菜單＃submenu3.0或＃submenu3.1 但是由於它們不是唯一的，我嘗試將它們與相鄰的選擇器連接起來。重寫HTML代碼是不可能相鄰的選擇器CSS無法更改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;"> 
 
\t <span class="menuBullet"></span> 
 
\t <span id="menu_member_personal" class="menuText menuTextActive">Personal</span> 
 
\t <script>menuCount++;</script> 
 
\t <ul id="subMenuContainer3" class="subMenuContainer" style="overflow: visible;"> 
 
\t \t <li id="submenu3.0" class="firstSubMenu subMenu" linkurl="#" style="cursor: pointer; width: 260px;"> 
 
\t \t \t <span class="subMenuBullet"></span> 
 
\t \t \t <span class="subMenuText subMenuTextActive">Profile</span> 
 
\t \t \t <script>$('submenu3.0').addClassName('firstSubMenu');</script> 
 
\t \t </li> 
 
\t \t <li id="submenu3.1" class=" subMenu" linkurl="#" style="cursor: pointer; width: 260px;"> 
 
\t \t \t <span class="subMenuBullet"></span> 
 
\t \t \t <span class="subMenuText">Messages</span> 
 
\t \t </li> 
 
\t \t <li id="submenu3.2" class=" subMenu" linkurl="#" style="cursor: pointer; width: 260px;"> 
 
\t \t \t <span class="subMenuBullet"></span> 
 
\t \t \t <span class="subMenuText">Contacts</span> 
 
\t \t </li> 
 
\t </ul> 
 
</li>

如何正確地寫一個選擇，這樣它的工作原理，並在一個唯一的ID =「menu_member_personal」

來源

2017-09-16 Bandibar

有一噸的唯一的ID（順便說一句謝謝），如果你的目標是'＃submenu3.0'爲什麼不直接使用'＃submenu3.0'？當你說他們不是唯一的，你的意思是你在頁面上有多個'＃submenu3.0'，但它不包含在例子中？ – zer00ne

它們在頁面上是唯一的，但在整個網站中並不唯一。像什麼時候管理員登錄或一些他們有不同的菜單，但子菜單將有這樣的編號 – Bandibar

你可以使用#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>

來源

2017-09-16 08:37:01 Nisarg

Thx。這個對我有用 – Bandibar

相鄰的選擇器CSS無法更改html

回答

相關問題