23

这是来自Twitter Bootstrap的一些代码

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

那么从那是什么.nav.pull-right意思呢？（注意有两个点）

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

4

6 回答 6

35

两个点表示两个类别。

IE 它正在选择所有具有 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>
于 2012-05-30T20:49:09.463 回答
9

这意味着一个元素同时具有类nav和pull-right.

于 2012-05-30T20:49:02.087 回答
6

选择器查找任何具有该类的元素，该类nav也有一个类pull-right：

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

class附带说明一下，选择器和属性中的顺序都无关紧要。

于 2012-05-30T20:51:49.687 回答
4

.nav.pull-right表示匹配具有“nav”类和“pull-right”类的元素。

于 2012-05-30T20:50:05.503 回答
1

2 个点实际上同时匹配 2 个类（选择器）

在阅读了汇总的答案后，我仍然不是很清楚，并且在阅读 .container div { }和div.container { }后进行了研究并得出了一个深思熟虑的理解，其中讨论了点（本例）和空格之间的区别选择器（匹配第一个选择器的孩子）。

回忆一下关于 CSS 选择器的经验法则：

  1. 空格（在选择器中）表示右选择器是左选择器的子选择器
  2. 点捐赠一个类选择器
  3. 否则，标签选择器， 例如 <DIV> 或 <H3> 或 <td>

其中规则 2 和 3 在某种程度上可以互换

原始场景：

.nav.pull-right

将第一个点类选择器转换为标记选择器（将规则 2 与规则 3 互换）成为标记+点方案 

ul.pull-right

最后，结果是微不足道的，它匹配了所有定义了 pull-right 类的 ul 标记

PS我不会再混淆了，希望各位读者不要再混淆了

于 2015-05-11T07:33:18.513 回答
0

这是我对重复问题的回答。我已经付出了很多努力，以至于我想与“原始”帖子分享。

它只选择具有“move”和“up”类的元素。 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-17T12:22:05.200 回答