Стиль CSS, основанный на дочерних элементах

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} 

см https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child для получения дополнительной информации о шаблонах и как использовать nth селекторы.

Например:

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/