javascript - :not function 的目标元素

Question

我有一个定位链接的功能，以排除这些链接上的样式。我的链接有一个 ID，所以我将 href 的那个 ID 设为目标

a:not([id='hopscotch_logo'] { color: red; }

我现在还想查找 id 的 href 子项，如下所示:

a:not([id='hopscotch_logo + a'] { color: red; }

这是场景的一些虚拟 html:

<li class="dropdown">
<a href="#" id="hopscotch_logo" class="dropdown-toggle" data-toggle="dropdown">Dont turn me red</a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="/Tools/Home/ChangePassword.aspx"> I dont want to be red either </a></li>
</ul>
</li>

我可以更改 html 和/或以其他方式进行，我只需要获得正确的路径来定位我父 ID 的这个子元素...这是错误的，但我想它是关闭的a:not ([id='hopscotch_logo + a'] {color:red;}

Answer 1

你可以使用下面的代码

a:not(#hopscotch_logo) + a {
  color:red;
}

<a href="#" id="hopscotch_logo" class="dropdown-toggle" data-toggle="dropdown">Dont turn me red</a>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dont turn me red</a>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">turn me red</a>

a:not(#hopscotch_logo) + ul a {
  color:red;
}

<li class="dropdown">
<a href="#" id="hopscotch_logo" class="dropdown-toggle" data-toggle="dropdown">Dont turn me red</a>
	<ul class="dropdown-menu">
		<li class="menu-item"><a href="/Tools/Home/ChangePassword.aspx"> I dont want to be red either </a></li>
	</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">turn me red</a>
	<ul class="dropdown-menu">
		<li class="menu-item"><a href="/Tools/Home/ChangePassword.aspx"> I want to be red either </a></li>
	</ul>
</li>