Question

是否可以使用与元素匹配的CSS规则，只要它包含某个子元素？

基本上我有帖子内容，可能有内联图片。我希望所有图像都居中但不是文本。看起来内联图像有一个模式。它们看起来像这样：

<p>Some text</p>
<p>
    <!-- I want this p to be centered since it's an image -->
    <a href="#"><img src="http://fpoimg.com/500x500"/></a>
</p>
<p>Some more text</p>

有没有可能的方法没有修改html只用一些花哨的CSS选择器来做到这一点？我知道如何使用jQuery，但我一直很感兴趣，如果有一些新的CSS选择器来帮助实现这一点。

Answer 1

试试这个：

p>a>img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 2

您可以使用p:nth-child(-n+3)之类的内容来选择特定类型和模式的元素。（你必须创建一个父选择器。）

您还可以使用基本级联将样式应用于元素：

p img {styles}

有关模式以及如何使用nth选择器的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child。

例如：

p:nth-child(2n+1) {
      background-color: lime;
    }


<div>
      <span>This span is limed!</span>
      <span>This span is not. :(</span>
      <em>This one is odd. </em>
      <span>Sadly, this one is not...</span>
      <span>But this one is!</span>
</div>

Answer 3

告诉我这是否解决了您的问题：

p img {
    display: block;
    margin: 0 auto;
}

JSFiddle：http://jsfiddle.net/dpmytcjL/1/

基于子元素的CSS样式

3 个答案: