<h2>Arbitrary Tag</h2>
<p>no</p>
<p>yes</p>
<p>yes</p>
<p>no</p>
<h2>Arbitrary Tag</h2>
<p>no</p>
<p>yes</p>
<p>no</p>
在上面的例子中，如何选择段落元素包围的段落元素？ （此具体示例中的“是”段落）
答案 0 :(得分：0)
这在CSS中是不可能的。但是，你可以使用jQuery为这些元素添加样式。
$('p').each(function(){
if ($(this).prev('p').length && $(this).next('p').length){
$(this).addClass('yes');
}
});.yes {
color: green;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Arbitrary Element</h1>
<p>no</p>
<p>yes</p>
<p>yes</p>
<p>no</p>
<h2>Arbitrary Element</h2>
<p>no</p>
<p>yes</p>
<p>no</p>
答案 1 :(得分：0)
我选择由其他段落元素包围的段落元素的用例是在段落元素和周围元素之间有不同的边距。我通过反转元素的作用来做到这一点：我没有尝试将行中的最后一个类型元素作为目标，而是在后面的元素上应用了反向样式。
div,
p { margin: 0; padding: 10px; }
p { background: red; }
p + p { margin: 10px 0; }
p + :not(p) { background: blue; margin-top: 20px; }
:not(p) + p { margin-top: 20px; }<p>I want this to have top margin 20.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have bottom margin 20.</p>
<div>arbitrary element</div>
<p>I want this to have top margin 20.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have bottom margin 20.</p>
<div>arbitrary element</div>
<p>I want this to have top margin 20.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have bottom margin 20.</p>
<div>arbitrary element</div>
<p>I want this to have top margin 20.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have bottom margin 20.</p>
答案 2 :(得分：0)
您的＆＃34;段落之间的不同边距的更简单的变化＆＃34;回答 - 在所有段落上使用20px上/下边距，但在段落之间缩小，以达到相同的效果。
div, p {
padding: 10px;
}
div {
margin: 0;
}
p {
background: red;
margin: 20px 0;
}
p + p {
margin-top: -10px;
}
p +:not(p) {
background: blue;
}<p>I want this to have top margin 20.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have bottom margin 20.</p>
<div>arbitrary element</div>
<p>I want this to have top margin 20.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have bottom margin 20.</p>
<div>arbitrary element</div>
<p>I want this to have top margin 20.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have bottom margin 20.</p>
<div>arbitrary element</div>
<p>I want this to have top margin 20.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have top margin 10.</p>
<p>I want this to have bottom margin 20.</p>
答案 3 :(得分：-1)
虽然在CSS中这是不可能的，但我认为我提供了（多种）jQuery方法的简单JavaScript版本：
function isSurroundedBy(node, tag) {
// ensuring that we have a lowercase string to compare with:
tag = tag.toLowerCase();
// getting the previous sibling element of the passed-in node:
var pre = node.previousElementSibling,
// getting the next sibling element of the passed-in node:
next = node.nextElementSibling;
// returns true, if:
// there is a previous element sibling AND
return pre &&
// that element has the correct tagName AND
pre.tagName.toLowerCase() === tag &&
// there is a next element sibling AND
next &&
// that next element sibling is of the correct tagName:
next.tagName.toLowerCase() === tag;
}
// using Array.prototype.filter on the array-like nodeList returned by querySelectorAll('p'):
var surrounded = Array.prototype.filter.call(document.querySelectorAll('p'), function(p) {
// p, here, is the paragraph-node from the nodeList over which we're iterating:
// if the isSurroundedBy() function returns true:
if (isSurroundedBy(p, 'p')) {
// we return the current <p> element to the filtered array:
return p;
}
});
// iterating over the filtered paragraphs, using Array.prototype.forEach():
surrounded.forEach(function(p) {
// p (again) is the current paragraph-node,
// setting its color to 'red':
p.style.color = 'red';
});<h2>Arbitrary Element</h2>
<p>no</p>
<p>yes</p>
<p>yes</p>
<p>no</p>
<h2>Arbitrary Element</h2>
<p>no</p>
<p>yes</p>
<p>no</p>
参考文献：