CSS Class Merging

Question

Может кто-нибудь пролить свет на эту проблему? Ожидаемый результат, кажется, не происходит ... Я прав в своих предположениях?

.float-right{
  float:right;
}

.header{
   (stuff we don't care about)
}

.header img .float-right {
  display:inline;
  margin:0 0 0 0.5em;
}

I THOUGHT это будет означать, что тег внутри

получит:

float:right;
display:inline;
margin:0 0 0 0.5em;

IF тег был class = "float-right"

Это правильно?

Answer 1

Чтобы получить желаемый результат, он должен быть

.header img.float-right

(без пробела)

Answer 2

Нет. .header img .float-right означает любой тег с классом float-right, который является потомком тега img, который, в свою очередь, является потомком тега с классом заголовка.

Answer 3

Вот что произойдет, если вы удалите пробел между img и .float-right в вашей таблице стилей.

Answer 4

ЕСЛИ тег был class = "float-right"

Чтобы не было места

 .header img.float-right {

Как сейчас, ищет

 [an element with class "float-right"] [inside an img] [inside an element with class header]