Question

的一些代码

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

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

我搜索here，因为我认为它是某种选择器，但我找不到它。

Answer 1

两个点表示两个类。

即。它正在选择所有带有导航和拉向右类的元素它的目标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>

Answer 2

这意味着包含nav和pull-right类的元素。

Answer 3

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

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

作为旁注，订单在选择器和class属性中都无关紧要。

Answer 4

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

Answer 5

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

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

回想一下关于CSS选择器的大拇指：

空格（在选择器中）表示右选择器是左选择器的子项
点捐赠类选择器
否则，标签选择器 ，例如。＆LT; DIV＆GT;或者＆lt; H3＆gt;或＆lt; td＆gt;

其中规则2＆amp; 3是以某种方式可互换的

原始方案：

.nav.pull-right

将第一个点类选择器转换为标签选择器（与规则3交换规则2）变为标记+点场景

ul.pull-right

最后，结果很简单，它匹配所有ul标签和pull-right class defined

P.S。我永远不会再混淆，希望每个读者都不要再混淆了

Answer 6

这是我在一个重复问题上的答案。我付出了很多努力，我希望与“原创”帖子分享。

它只选择“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>

CSS声明中的两个点是什么意思？

6 个答案: