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

Posted 2023-03-06

【中文标题】CSS 声明中的两个点是啥意思？

【英文标题】：What do two dots in a CSS declaration mean?CSS 声明中的两个点是什么意思？

【发布时间】：2012-06-05 03:27:24

【问题描述】：

这是来自Twitter Bootstrap的一段代码

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

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

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

【问题讨论】：

我使用 css 已有 13 年了，但不知何故完全错过了这一点，难以置信 :-O

【参考方案1】：

两个点表示两个类。

I.E.它正在选择具有 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>

【讨论】：

标记多行代码块时，每行缩进四个空格，而不是使用反引号。

【参考方案2】：

这意味着具有nav 和pull-right 两个类的元素。

【参考方案3】：

选择器查找类为 nav 且类为 pull-right 的任何元素：

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

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

【参考方案4】：

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

【参考方案5】：

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

看完汇总的答案，我还是不太清楚，看了 .container div and div.container ，讨论了dot（本例）和选择器之间的空格（匹配第一个选择器的子级）。

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

空格（在选择器中）表示右选择器是左选择器的子选择器 dot 捐赠一个类选择器 否则，标签选择器 例如 或

或

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

---

原始场景：

.nav.pull-right

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

ul.pull-right

最后，结果很简单，它匹配所有定义了 pull-right 类的 ul 标记

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

【讨论】：

【参考方案6】：

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

它只选择具有“move”和“up”类的元素。 http://www.w3schools.com/cs-s-ref/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>