blocks|key|558416|text|这意味着同时具有nav和pull-right类的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|558417|entityMap^0|8|3|C|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>That means an element with both classes <code>nav</code> and <code>pull-right</code>.</p>


blocks|key|558489|text|这两个点表示两个类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|558490|也就是说，它选择了具有一个nav类的所有元素，然后向右拉它的目标HTML将如下所示|558491|<div+class="nav+pull-right"></div>|code-block|syntax|javascript|558492|这也不一定意味着它在寻找一个div。它可以是任何元素。|558493|根据完整的选择器，它将匹配类似于这些.navbar+.nav.pull-right+.dropdown-menu,+.navbar+.nav+.dropdown-menu.pull-right的内容|offset|length|style|CODE|558494|<element+class='navbar'>
++++<element+class='nav+pull-right'>
++++++++<element+class='dropdown-menu'>It+would+match+this!</element>
++++</element>
</element>|558495|以及|558496|<element+class='navbar'>
++++<element+class='nav'>
++++++++<element+class='dropdown-menu+pull-right'>It+would+also+match+this!</element>
++++</element>
</element>|558497|entityMap^0|0|0|0|0|I|26|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>The two dots indicate two classes.</p>

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

<pre><code>&lt;div class="nav pull-right"&gt;&lt;/div&gt;
</code></pre>

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

<p>According to your selector in full, it would match something like these
<code>.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right</code></p>

<pre><code>&lt;element class='navbar'&gt;
    &lt;element class='nav pull-right'&gt;
        &lt;element class='dropdown-menu'&gt;It would match this!&lt;/element&gt;
    &lt;/element&gt;
&lt;/element&gt;
</code></pre>

<p>as well as</p>

<pre><code>&lt;element class='navbar'&gt;
    &lt;element class='nav'&gt;
        &lt;element class='dropdown-menu pull-right'&gt;It would also match this!&lt;/element&gt;
    &lt;/element&gt;
&lt;/element&gt;
</code></pre>


blocks|key|558559|text|.nav.pull-right表示匹配具有"nav“类和"pull-right”类的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|558560|entityMap^0|0|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>.nav.pull-right</code> means match elements that have the class "nav" and the class "pull-right".</p>


blocks|key|558637|text|选择器查找类为pull-right且类为nav的任何元素|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|558638|<div+class="nav+pull-right"></div>|code-block|syntax|javascript|558639|顺便说一句，选择器和class属性中的顺序都不重要。|558640|entityMap^0|7|A|K|3|0|0|A|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>The selector looks for any element with the class <code>nav</code> that also has a class of <code>pull-right</code>:</p>

<pre><code>&lt;div class="nav pull-right"&gt;&lt;/div&gt;
</code></pre>

<p>As a side note, the order doesn't matter both in the selector and in the <code>class</code> attribute.</p>


blocks|key|558679|text|这是我对一个重复问题的回答。我在这篇文章中付出了太多的努力，所以我想把它和“原创”的帖子一起分享。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|558680|它只选择类为"move“和"up”的元素。http://www.w3schools.com/cssref/css_selectors.asp|offset|length|558681|​|558682|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;
}|code-block|syntax|javascript|558683|<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>


<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>|558684|558685|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/css_selectors.asp^0|0|L|1D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>This is my answer on a duplicated question. I've put so much effort in it that I wanted to share it with the "original" post. </p>

<p>It just selects elements with the classes "move" and "up". 
<a href="http://www.w3schools.com/cssref/css_selectors.asp" rel="nofollow">http://www.w3schools.com/cssref/css_selectors.asp</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="separator"&gt;&lt;/div&gt;
&lt;div class="move"&gt;
  1
  &lt;/div&gt;
&lt;div class="up"&gt;
  2  
&lt;/div&gt;
&lt;div class="move up"&gt;
  3
&lt;/div&gt;
&lt;div class="move classyclass up"&gt;
  4
&lt;/div&gt;
&lt;div class="separator"&gt;&lt;/div&gt;

&lt;!-- Additional knowledge :) --&gt;
&lt;div class="class1"&gt;
  5
  &lt;/div&gt;
&lt;div class="class2"&gt;
  6
  &lt;/div&gt;
&lt;div class="class1 class2"&gt;
  7
  &lt;/div&gt;
&lt;div class="class1 classyclass class2"&gt;
  8
  &lt;/div&gt;
&lt;span&gt;
  &lt;div&gt;8.1&lt;/div&gt;
&lt;/span&gt;
&lt;div class="separator"&gt;&lt;/div&gt;
&lt;div class="class3"&gt;
  9
  &lt;/div&gt;
&lt;div class="class4"&gt;
  10
  &lt;/div&gt;
&lt;div class="class3 class4"&gt;
  11
  &lt;/div&gt;
&lt;div class="class3 classyclass class4"&gt;
  12
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>This is a bit of code from <a href="http://twitter.github.com/bootstrap/" rel="noreferrer">Twitter Bootstrap</a></p>

<pre><code>.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {
  left: auto;
  right: 0;
}
</code></pre>

<p>So from that what does <code>.nav.pull-right</code> mean? (note that there are two dots) </p>

<p>I have searched <a href="http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/" rel="noreferrer">here</a> because I assumed it was some kind of selector but I couldn't find it.</p>


What do two dots in a CSS declaration mean?

这是来自的一小段代码.navbar .nav.pull-right .dropdown-menu,.navbar .nav .dropdown-menu.pull-right {  left: auto;  right: 0;}那么，从这一点来看，.nav.pull-right意味着什么？(请注意，这里有两个点)我搜索...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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