23

これはTwitterBootstrapからのコードです

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

それで、それは.nav.pull-rightどういう意味ですか？（2つのドットがあることに注意してください）

ある種のセレクターだと思っていたのですが、見つかりませんでした。

4

6 に答える 6

35

2つのドットは、2つのクラスを示します。

IEこれはnavのクラスを持つすべての要素を選択しており、ターゲット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

最後に、結果は些細なものであり、すべてのulタグとpull-rightクラスが定義されているものと一致します

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 に答える