CSS声明中的两个点是什么意思？ [英] What do two dots in a CSS declaration mean?

问题描述

这是来自 Twitter Bootstrap 的一小段代码

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

因此， .nav.pull- right 是什么意思？ （注意有两个点）

So from that what does .nav.pull-right mean? (note that there are two dots)

我搜索过这里，因为我认为这是一种选择器，但我找不到。

I have searched here because I assumed it was some kind of selector but I couldn't find it.

推荐答案

这两个点表示两个类。

它是选择所有元素与nav类和右下
它的目标HTML将是这样

I.E. It is selecting all elements with a class of nav AND pull-right it's target HTML would look like this

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

这不一定意味着它正在寻找一个div。它可以是任何元素。

it doesn't necessarily mean that it's looking for a div either. It could be any element.

根据你的选择器，它会匹配像这样
.navbar .nav.pull -right .dropdown-menu，.navbar .nav .dropdown-menu.pull-right

According to your selector in full, it would match something like these .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>

这篇关于CSS声明中的两个点是什么意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！