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

Это немного кода из Twitter Bootstrap Что означают две точки в объявлении CSS?

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

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

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

источник

2012-05-30 byronyasgur

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

Эти две точки обозначают два класса.

I.E. Он выбирает все элементы с классом нав И тянуть правый это цель 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>

источник

2012-05-30 20:49:09 dockeryZ

При маркировке многострочных блоков кода отступ каждой строки с четырьмя вместо использования backticks. – BoltClock

Спасибо, мне было интересно – dockeryZ

Это означает элемент с обоими классами nav и pull-right.

источник

2012-05-30 20:49:02 wsanville

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

источник

2012-05-30 20:50:05

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

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

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

источник

2012-05-30 20:51:49 Blender

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

Он просто выбирает элементы с классами «двигаться» и «вверх». 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>

источник

2015-03-17 12:22:05 OddDev

2 точки на самом деле соответствие для 2-х классов (селектор) одновременно

После прочтения Отстоявшийся ответа, я до сих пор не очень понятно, и сделать исследование и придумайте вдумчивое понимание после прочтения .container div { } and div.container { }, в котором обсуждалась разница dot (этот случай) & пространство между селекторами (соответствие для дочернего элемента 1-го селектора).

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

пространства (в селектор) означает правый селектор ребенка левого селектора
точка жертвуют селектор в класс
В противном случае , tag selectoreg < DIV> или < H3> или < тда>

, в которых Правило 2 & 3 являются каким-то образом взаимозаменяемы

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

.nav.pull-right

Transform 1-ого класса точки селектор для выбора тега (правило обмена 2 с правилом 3) bec Ома тег + точка сценарий

ul.pull-right

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

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

источник

2015-05-11 07:33:18 Sxc

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

ответ

Смежные вопросы