CSS 选择器 - 如果最后一个图像 ID 为 X，则更改宽度

Question

我现在尝试几个小时来弄清楚如果元素之前有图像 ID，我如何更改类的宽度。

目前我的代码看起来像这样

<blockquote>
<img id="bp_avatar" src="...">
<p>Text</p>
</blockquote 

现在的问题是图像是动态插入的，在某些情况下它会存在，而在其他情况下则不会。我现在尝试将图像包裹在文本中，但要适合它，blockquote p 需要宽度为 90%。

所以这就是问题所在，如果存在则应为 90%，如果不存在则应为 100%。我想使用 css 而不是 jquery，我在 w3 上找到了一些关于 4 级选择器的文档并尝试使用它们，目标是在 #bp_avatar 存在时应用样式。

所以我尝试了类似的方法

#bp_avatar ~ #bluepostq blockquote p  {
width: 90%!important;
}


#bluepostq blockquote p! > #bp_avatar{
width: 90%!important;
        }

他们都没有工作，所以什么也没发生，我想我误解了一些东西，希望有人能告诉我我做错了什么。

Answer 1

使用 ~ 是正确的，但你只需要稍微不同地使用它:

p {
  width: 100%;
}
#bp_avatar ~ p {
  width: 90%;
}

这将使 p 的宽度为 100%，但如果它前面有 #bp_avatar，它将是 90%。

如果您试图将它限制在某个元素内(可能是 #bluepostq，它不在示例 html 中)，那么在选择器中首先出现:

#bluepostq #bp_avatar ~ p {

此外，如果您知道 p 将始终是 #bp_avatar 之后的下一个元素，您可以使用相邻兄弟选择器:

#bp_avatar + p {

blockquote{
  border: 1px solid red;
}
p{
  border: 1px solid blue;
  display: inline-block;
  width: 100%;
}
img{
  border: 1px solid green;
}

#bp_avatar ~ p {
  width: 90%;
}

<blockquote>
  <img id="bp_avatar" src="...">
  <p>Text</p>
</blockquote>
<blockquote>
  <p>Text</p>
</blockquote>

https://jsfiddle.net/ezLaaoco/