Question

我有一个功能来定位链接以排除这些链接上的样式。我的链接有一个ID，所以我的目标是a href的id

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

我现在也想找一个这样的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;} < / p>

Answer 1

您可以使用以下代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您需要两个选择器，每个a元素一个。

要获得第二个a元素，首先需要通过其.dropdown-menu祖先。由于.dropdown-menu是第一个a的兄弟，因此您可以达到第二个a。

a:not(#hopscotch_logo), a:not(#hopscotch_logo) + .dropdown-menu a {
  color: red;
}

目标元素：不是功能

2 个答案: