Jquery 不适用于两个 :not 选择器？
Posted
技术标签:
【中文标题】Jquery 不适用于两个 :not 选择器？【英文标题】：Jquery doesnt work with two :not selectors? 【发布时间】：2018-12-19 23:53:03 【问题描述】：我在 Jquery 中使用了两个 :not 选择器，如下所示，当我同时使用这两个选择器时它不起作用？
//$("section:not('#contact')").css(border:"2px solid red");
//$("section:not('#clients')").css(border:"2px solid red");
它只适用于一个非选择器，有人知道为什么吗？
这里是html
<!DOCTYPE html>
<html>
<head>
<title>Green Design</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="wrapper">
<h1 id="logo">Green Design</h1>
<nav>
<h2>Main Navigation</h2>
<ul>
<li><a href="">Home</a><span>/</span></li>
<li><a href="">About</a><span>/</span></li>
<li><a href="">Portfolio</a><span>/</span></li>
<li><a href="">Clients</a><span>/</span></li>
<li><a href="">Contact</a><span>/</span></li>
</ul>
</nav>
</div>
</header>
<div id="lead-banner">
<img src="images/banner.jpg" >
<div class="banner-overlay">
<div class="wrapper">
<div class="banner-title">We Know Web Design</div>
<p>With over 15 years experience you can be sure your website is in safe hands</p>
<a href="">View Our Work</a>
</div>
</div>
</div>
<div id="main-content">
<div class="wrapper">
<section id="points-of-sale">
<h2>Points of Sale</h2>
<ul>
<li>
<img src="images/cs-1.png" >
<h3>Web Design</h3>
<p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
</li>
<li>
<img src="images/cs-2.png" >
<h3>E-commerce</h3>
<p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
</li>
<li>
<img src="images/cs-3.png" >
<h3>SEO</h3>
<p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
</li>
</ul>
</section>
<section id="clients">
<h2>What Our Clients Say</h2>
<img src="images/head.png" >
<blockquote>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et l</blockquote>
</section>
<section id="contact">
<ul id="contact-methods">
<li>555 555 5555</li>
<li>hello@whatever.com</li>
<li>
<span>Leaf Studios</span>
<span>Times Square</span>
<span>NY</span>
</li>
</ul>
<img src="images/map.png" >
<ul id="social-nav">
<li class="facebook"><a href="">Facebook</a></li>
<li class="twitter"><a href="">Twitter</a></li>
<li class="pinterest"><a href="">Pinterest</a></li>
<li class="linked-in"><a href="">Linked In</a></li>
</ul>
</section>
</div>
</div>
<!-- this is how you use jquery in your html -->
<script src="scripts/jquery-3.3.1.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>
有人知道这个问题的解决方案吗？您可以在 Jquery 中使用两个 :not 选择器吗？当我使用两个 not 选择器时，它不会 :not 选择其中任何一个？这怎么了？
【问题讨论】：
两者都不起作用的例子在哪里？ 替换与此一起使用的那个 $("section:not('#contact, #clients')").css(border:"2px solid red");看看它是否会工作:) 行啊！谢谢，所以我猜你只需要在参数中包含这两个？ 更新问题以显示不起作用的代码。 @akotch 你应该也能做到$('section:not(#contact):not(#clients)')
【参考方案1】：
也许是这样：
$('section').not('#contact').not('#clients').css(border:"2px solid red");
【讨论】：
【参考方案2】：两个都试试
$('section:not(#contact,#clients)').css(border:"2px solid #000");
和
$('section').not('#contact,#clients').css(border:"2px solid red");
【讨论】：
以上是关于Jquery 不适用于两个 :not 选择器？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 jQuery 选择器适用于 Chrome，但不适用于 Safari？