Question

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

目前我的代码看起来像

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

现在的问题是图像是动态插入的，在某些情况下，它会出现在其他一些图像中。我现在尝试将图像包装在文本中，但为了适应它，blockquote p需要90％的宽度。

所以这就是问题，如果它在那里应该是90％，如果它不存在则应该是100％。我想使用css而不是jquery，我在w3上找到了一些关于Level 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/

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

1 个答案: