Вопрос по html, css – Как нацелиться на конкретный элемент div в CSS?

9

Я представляю код, похожий на этот:

<div id="foo">
 <img src="bar.png" align="right">
 <img src="cat.png" align="right"> 
</div>

Теперь мой вопрос: как мне настроить таргетинг на конкретное изображение в CSS при наличии вышеуказанного кода?

Цель как? Селекторы CSS позволяют вам настроить таргетинг на «nth-child» набирать вещи, по атрибутам тегов и т.д Marc B
Да, я вынужден использовать вышеуказанный код. Netizen110
Вы намекаете, что не можете изменить HTML? Также обратите внимание, чтоalign на<img> устарел в HTML4 и теперь устарел в HTML5. Andrew Marshall

Ваш Ответ

6   ответов
0
#foo > IMG:first-child {/* first of two IMGs */}
#foo > IMG + IMG       {/* second one */}

14

какое изображение вы хотите нацелить. Предполагая, что это первое (хотя реализации одинаковы для обоих) изображения:

#foo img[src="bar.png"] {
    /* css */
}


#foo img[src^="bar.png"] {
    /* css */
}

#foo img:first-child {
    /* css */
}

#foo img:nth-of-type(1) {
    /* css */
}

Рекомендации:

CSS3 selectors.
Error: User Rate Limit Exceeded
1
div > img:first-child {/*the first image*/}
div > img:last-child {/*the last image*/}

13

.foo img:nth-child(2) { css here }

или же

.foo img:first-child { css here }
.foo img:last-child { css here }
9

почему все так привязаны к #foo div. Вы можете настроить таргетинг на тег img и даже не беспокоиться о теге div. Эти селекторы атрибутов, выбранные знаком «начинается с».

img[src^=bar] { css }
img[src^=cat] { css }

Они выбираются как "содержит".

img[src*="bar"] { css }
img[src*="cat"] { css }

Или вы можете выбрать точный источник.

img[src="bar.png"] { css }
img[src="cat.png"] { css }

Если вы хотите нацелить их обоих, то вы можете использовать div id.

#foo img { css }

Только для одного из изображений не нужно беспокоиться о #foo div.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

Вы можете выбрать по детской позиции:

 #foo img:first-child { /* for the bar */ }
 #foo img:nth-child(2) { /* for the cat */ }

Вы можете выбрать по детской позиции, считая только изображения:

 #foo img:first-of-type { /* for the bar */ }
 #foo img:nth-of-type(2) { /* for the cat */ }

Вы можете выбрать по изображению URL:

 #foo img[src^=bar] { /* for the bar */ }
 #foo img[src^=cat] { /* for the cat */ }

Похожие вопросы