Что означают две точки в объявлении CSS?

Ответ 1

Две точки указывают два класса.

т.е. Он выбирает все элементы с классом nav и pull-right этот целевой HTML будет выглядеть так:

<div class="nav pull-right"></div>

это не обязательно означает, что он ищет div. Это может быть любой элемент.

В соответствии с вашим селектором в полном объеме, он будет соответствовать чему-то подобному .navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right

<element class='navbar'>
    <element class='nav pull-right'>
        <element class='dropdown-menu'>It would match this!</element>
    </element>
</element>

а также

<element class='navbar'>
    <element class='nav'>
        <element class='dropdown-menu pull-right'>It would also match this!</element>
    </element>
</element>

Ответ 2

Это означает элемент с двумя классами nav и pull-right.

Ответ 3

Селектор ищет любой элемент с классом nav, который также имеет класс pull-right:

<div class="nav pull-right"></div>

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

Ответ 4

.nav.pull-right означает элементы соответствия, которые имеют класс "nav" и класс "pull-right".

Ответ 5

2 точки фактически соответствуют двум классам (селектор) одновременно

Прочитав объединенный ответ, я все еще не очень ясен и делаю исследование и придумываю вдумчивое понимание после прочтения .container div {} и div.container {}, в котором обсуждалась разница точка (этот случай) и пробел между селекторами (соответствие для дочернего элемента 1-го селектора).

Вспомним правило большого пальца о селекторе CSS:

• пробел (в селекторе) означает, что правый селектор является потомком левого селектора
• точка пожертвуйте селектор класса
• В противном случае селектор тегов, например. <DIV> или < H3 > или <td>

в котором Правило 2 и 3 как-то взаимозаменяемы

исходный сценарий:

.nav.pull-right

Преобразовать селектор класса 1-й точки в селектор тегов (правило обмена 2 с правилом 3) стать тегом + точка сценария

ul.pull-right

Наконец, результат тривиален, он соответствует всем тегам ul с указанным классом pull-right

P.S. Я больше никогда не смучусь, надеюсь, что каждый читатель больше не будет его путать.

Ответ 6

Это мой ответ по дублированному вопросу. Я прилагал к этому столько усилий, что хотел поделиться им с "оригинальной" записью.

Он просто выбирает элементы с классами "move" и "вверх". http://www.w3schools.com/cssref/css_selectors.asp

div{
  width: 60px;
  height: 60px;
  background: beige;
  border: solid black;
  float:left;
  margin: 10px;
  text-align: center;
  line-height: 60px;
  font-family: arial;
  font-weight: bold;
}
.separator{
  width: 5px;
  height: 60px;
  border: solid black;
  background: grey;
  clear: both;
}



.move.up{
  background: green;
}


//Additional knowledge
.class1 .class2{
  background: orange;
}
span div{
  background: purple;
}

.class3, .class4{
  background: brown;
}

<div class="separator"></div>
<div class="move">
  1
  </div>
<div class="up">
  2  
</div>
<div class="move up">
  3
</div>
<div class="move classyclass up">
  4
</div>
<div class="separator"></div>

<!-- Additional knowledge :) -->
<div class="class1">
  5
  </div>
<div class="class2">
  6
  </div>
<div class="class1 class2">
  7
  </div>
<div class="class1 classyclass class2">
  8
  </div>
<span>
  <div>8.1</div>
</span>
<div class="separator"></div>
<div class="class3">
  9
  </div>
<div class="class4">
  10
  </div>
<div class="class3 class4">
  11
  </div>
<div class="class3 classyclass class4">
  12
  </div>