img в списке после селектора?

Question

Селектор здесь (div.img) выбирает все div в классе изображений, верно?Что я не понимаю, для чего нужен второй img?Я немного раньше занимался CSS, но никогда не сталкивался с этим синтаксисом.

div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

Answer 1

Второе изображение выделяет <img> теги внутри <div class="img"> тегов; пробел говорит селектору взглянуть на все элементы-потомки <div>.

Итак, если у нас есть

<div class="image">
    <img src="foo.png">
</div>

Тег <img> будет иметь белую рамку, поле размером 3 пикселя и будет отображаться inline.

Answer 2

div.img обозначает имя класса div

Так что, если у вас есть

<div class="img">
<img src="image.gif" alt="" />    
</div>
<div>
<img src="image.gif" alt="" />    
</div>

тогда CSS будет применяться к более раннему элементу img, но не ко второму, потому что этот элемент не находится внутри div класса img.

В основном, стиль будет применен к любому элементу img, который является потомком элемента div класса img.

Answer 3

Селектор будет сопоставлять любые элементы <img>, которые являются потомками элемента <div>, с классом CSS img. Например, следующий тег <img> будет соответствовать правилу CSS

<div class="img">
    <img src="" alt="" /><!-- this img will be matched --> 
</div>