Question

我正在做的CSS / HTML工作是针对eBay的HTML模板。因此，我无法使用任何活动内容（JavaScript等），这似乎是最简单的方法。

我使用的软件填充模板适用于标签，在本例中为In [320]: (df.groupby('A', sort=False).B.apply(lambda x: pd.Series(x.values)) .unstack().rename(columns=lambda x: 'B_{}'.format(int(x)+1)) .reset_index()) Out[320]: A B_1 B_2 B_3 0 Dog x y z 1 Cat a b None和{{PARENTIMAGEURL1}}。当标记不存在时，该元素将保留一个空的src属性。

我需要调整模板的图像部分，使得如果存在父图像，则隐藏子图像。总会有一个子图像可用，因此该功能不需要反向工作。

该部分的HTML如下：

{{CHILDIMAGEURL1}}

如果父级存在，是否可以使用<div class="main-image"> <img src="{{PARENTIMAGEURL1}}" alt="Main Image" class="img-responsive"> <img src="{{CHILDIMAGEURL1}}" alt="Main Image" class="img-responsive"> </div>选择器隐藏带有子URL的图像？就媒体查询的可能性而言，我看到的文档非常有限。

非常感谢任何帮助。

Answer 1

有两种方法可以做到这一点。第一个是依赖DOM结构。

DOM结构方法

您可以使用CSS + selector来选择另一个元素的下一个元素：在这种情况下，是子图像。

因此，如果有一个父和子图像，子图像将被隐藏：

.main-image img + img {
  display: none;
}

<div class="main-image">
  <img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
  <img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
</div>

否则，选择器将无效，并且您将获得的唯一图像将显示：

.main-image img + img {
  display: none;
}

<div class="main-image">
  <img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
</div>

属性选择

但是，如果您的模板实际上不会删除父图像，只是将其源显示为空（即src=""），那么您可以获得更多创意。

第一版

这是一种方法：

首先，隐藏所有父图像
然后，如果父图像的源不是空的，则显示它
如果父图像的源不是空的，则隐藏其后的下一个图像（其子图像）

它正在做＃2这是棘手的部分。您可以使用an attribute selector来读取图像的src，但是您需要一些始终为真的片段，因此样式不会失败。

在下面的示例中，由于所有网址都来自placehold.it，因此我添加了img[src*="placehold"]，但您的实际解决方案可能看起来更像这样：

img[src*=".jpg"],
img[src*=".png"],
img[src*=".gif] {
  display: block;
}

.main-image img:nth-child(1) {
  display: none;
}
.main-image img[src*="placehold"]:nth-child(1) {
  display: block;
}
.main-image img[src*="placehold"]:nth-child(1) + img {
  display: none;
}

<div class="main-image" style="background: firebrick">
  <img src="" alt="Parent Image" class="img-responsive">
  <img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>
<div class="main-image" style="background: midnightblue">
  <img src="http://placehold.it/200x300?text=Parent+image" alt="Parent Image" class="img-responsive">
  <img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>

第二版

这是另一种基于属性选择器和:not伪选择器组合的方法：

/* hide all parent images with no source */
.main-image img[src=""]:nth-child(1) {
  display: none;
}
/* hide all child elements following a parent element that does have a source */
.main-image img:not([src=""]) + img {
  display: none;
}

.main-image img[src=""]:nth-child(1) {
  display: none;
}
.main-image img:not([src=""])+img {
  display: none;
}

<div class="main-image" style="background: firebrick">
  <img src="" alt="Parent Image" class="img-responsive">
  <img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>
<div class="main-image" style="background: midnightblue">
  <img src="http://placehold.it/200x300?text=Parent+image" alt="Parent Image" class="img-responsive">
  <img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>

仅CSS选择查询以隐藏HTML元素如果另一个元素具有内容

1 个答案:

DOM结构方法

属性选择