使用Jquery

Question

我最近看到了以下内容：

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

html是：

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

p标签被隐藏但不是h2标签。有人可以解释$（＆＃39; h2 + p＆＃39;）的作用吗？

Answer 1

css中的+字符是Adjacent sibling selectors。

它使您能够选择下一个直接元素。

例如 - 如果要选择p元素之后的每个img元素并为其赋予边距，可以使用：

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

实际样式将应用于p元素（而不是img元素）。请注意，这与ul li {background: red}完全相同，红色背景将应用于li内的ul元素，而不是ul本身。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;