Вопрос по twitter-bootstrap, css-selectors, css3, css – Что означают две точки в объявлении CSS?

18

Это немного кода отTwitter Bootstrap

.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {
  left: auto;
  right: 0;
}

Так что из того, что делает.nav.pull-right означать? (обратите внимание, что есть две точки)

Я искалВо потому что я предполагал, что это какой-то селектор, но не смог его найти.

Я пользуюсь css уже 13 лет, и почему-то совершенно пропустил это, невероятно: -O byronyasgur

Ваш Ответ

6   ответов
32

То есть. Он выбирает все элементы с классом 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>
При разметке блоков многострочного кода делайте отступ в каждой строке с четырьмя пробелами вместо использования обратных кавычек. BoltClock♦
Спасибо, мне было интересно dockeryZ
8

nav а такжеpull-right.

6

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

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

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

4

.nav.pull-right означает совпадающие элементы, которые имеют класс «nav» и класс «pull-right».

1

одновременн

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

Напомним правило о CSS-селекторе:

Космо (в селекторе) означает, что правый селектор является потомком левого селектора Точка пожертвовать селектор классаИначе,tag селектор например. <DIV> или <H3> или <td>

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

оригинальный сценарий:

.nav.pull-right

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

ul.pull-right

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

P.S. Я никогда не запутаюсь снова, надеюсь, что каждый читатель не перепутает это снова

0

чтобы поделиться этим с «оригинальным» постом.

Он просто выбирает элементы с классами «перемещение» и «вверх».http: //www.w3schools.com/cssref/css_selectors.as

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>

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