Используйте CSS для воздействия на внешний элемент

Question

Это трудно подвести итог в названии, так что прости меня.

По сути, вот что у меня есть:

a img {
/ * style * /
}

Однако я хочу повлиять на тег в этом случае.Есть ли способ сделать это в CSS, не прибегая к волшебству JavaScript?

Answer 1

К сожалению, каскадное в CSS идет только в одну сторону. Из вашего примера, я думаю, вы пытаетесь сделать что-то вроде этого:

<a><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->

<a>Hello</a> <!-- This A is normal -->

Большинство разработчиков достигли бы этого, просто добавив класс.

<a class="icon"><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->

Еще лучше, используйте этот класс, чтобы сделать значок фоновым изображением и добавить отступы.

<style type="text/css">
a.icon { background:18px left center no-repeat; line-height:18px; }
</style>

<a class="icon" style="background-image:url('icon.gif');">Hello with icon</a>

Поместите все свои изображения значков в классы, и у вас будет довольно чистый HTML!

Answer 2

Вы хотите применить стили к тегу, только если у него правильное изображение?Короче говоря, используя прямой CSS, сделать это невозможно.

РЕДАКТИРОВАТЬ

НО, если вы хотите сделать это с помощью jquery, вы можете сделать это так:

$('a').has('img').addClass('hasImg');

, затем используйте .hasImg в качестве хука

a.hasImg{background:lime;display:block;height:200px;width:200px;}

Вот пример демонстрации JSBin, которую я собрал (просмотр источника): http://jsbin.com/owafi4

Answer 3

Селекторы CSS не могут подниматься .Это ограничение языка.