Question

我具有如下HTML结构，其中包含重复的img和p标签对。在许多情况下，不存在img。

<img>
<p></p>
<img>
<p></p>
<img>
<p></p>
<p></p>
<p></p>
<img>
<p></p>

我希望选择所有未紧接img的p标签。

我可以选择开头为img的p个标签：

img + p {}

如何选择反函数？ -例如，没有img的p标签？

Answer 1

由于没有“上一个同级”选择器，因此可以对标准p元素进行样式设置，然后覆盖以img开头的元素。使用默认样式。

不过，最好将其包装在容器中，以免页面上的每个p都没有样式。

.container > p {
  color: red;
}

.container > img + p {
  color: black;
}

/* DEMO PURPOSES */
img { display: none; } img, p { margin: 0; }

<div class="container">
    <img />
    <p>This is preceded by img</p>
    <img />
    <p>This is preceded by img</p>
    <img />
    <p>This is preceded by img</p>
    <p>This is not preceded by img</p>
    <p>This is not preceded by img</p>
    <img />
    <p>This is preceded by img</p>
</div>

Answer 2

直到我编写此答案为止，CSS均未提供前一个元素的选择器。

对于您的情况，作为一种解决方法，假设将这些p和img标签放在包装div.wrapper中，请考虑尝试以下方法：

.wrapper > img + p ~ p {
   color: red;
}
.wrapper > img + p {
   color: black !important;
}

    <div class="wrapper">
	<img style="height:20px;display:block;" src="http://via.placeholder.com/350x250" />
	<p>unaffected</p>
	<p>affected</p>
	<p>affected</p>
	<img style="height:20px;display:block;" src="http://via.placeholder.com/350x250" />
	<p>unaffected</p>
	<p>affected</p>
	<img style="height:20px;display:block;" src="http://via.placeholder.com/350x250" />
	<p>unaffected</p>
</div>

希望我进一步推动了你。

如何选择其他元素之前没有的元素？

2 个答案: