添加标记一起使用jQuery

Question

我最近看到以下内容：

$('h2 + p').hide() 

其中HTML是：

<h2>hi there</h2> 
<p> try again</p> 

的p标签得到了隐藏，但不是H2标签。有人可以解释$（'h2 + p'）的作用吗？

Answer 1

+ css中的字符是Adjacent sibling selectors。

它使您能够选择下一个即时元素。

例如 - 如果你要选择每p元素是img元素之后，给它一个余量，可以使用：

img + p { 
    margin-top: 20px; 
} 

实际的样式将被应用到p元素（和不是img元素）。请注意，此工作原理与ul li {background: red}完全相同，红色背景将应用于ul内部的li元素，但不适用于ul本身。

下面是一个更复杂的例子：

p { 
 
    border: 1px solid red; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    border: 1px solid blue; 
 
} 
 
div + p { 
 
    border: 1px solid black; 
 
    background: purple; 
 
}

<p> 
 
Some paragraph 
 
</p> 
 
<div>text</div> 
 
<div>text</div> 
 
<p> 
 
Some paragraph 
 
</p> 
 
<p> 
 
Some paragraph 
 
</p> 
 
<div>text</div> 
 
<div>text</div> 
 
<p> 
 
Some paragraph 
 
</p>