9

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

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

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

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

  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Да, я вынужден использовать вышеуказанный код.

    от Netizen110
  • Цель как? Селекторы CSS позволяют вам настроить таргетинг на «nth-child» набирать вещи, по атрибутам тегов и т.д

    от Marc B
  • Вы намекаете, что не можете изменить HTML? Также обратите внимание, чтоalign на<img> устарел в HTML4 и теперь устарел в HTML5.

    от Andrew Marshall
6 ответов
  • 1

    Это должно сделать это.

    div > img:first-child {/*the first image*/}
    div > img:last-child {/*the last image*/}
    

  • 0

    Работает во всех браузерах, включая IE7 +.

    #foo > IMG:first-child {/* first of two IMGs */}
    #foo > IMG + IMG       {/* second one */}
    

  • 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 */ }
    

  • 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.

  • 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.