सीएसएस घोषणा में दो बिंदुओं का क्या अर्थ है?

Question

इस से Twitter Bootstrap

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

कि से

तो कोड का एक सा .nav.pull-right क्या मतलब है है? (ध्यान दें कि दो बिंदु हैं)

मैंने here खोजा है क्योंकि मुझे लगता है कि यह किसी प्रकार का चयनकर्ता था लेकिन मुझे यह नहीं मिला।

Answer 1

दो बिंदु दो वर्गों को इंगित करते हैं।

आईई। यह एनएवी के एक वर्ग के साथ सभी तत्वों का चयन और पुल सही यह लक्ष्य एचटीएमएल इस

<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 का मतलब मैच तत्वों वर्ग "मार्गदर्शक" और वर्ग है "पुल-सही"।

Answer 4

चयनकर्ता वर्ग nav भी pull-right के एक वर्ग है कि के साथ किसी भी तत्व के लिए लग रहा है:

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

एक तरफ ध्यान दें के रूप में, दोनों चयनकर्ता में और class विशेषता में कोई फर्क नहीं पड़ता।

Answer 5

यह एक डुप्लिकेट प्रश्न पर मेरा उत्तर है। मैंने इसमें इतना प्रयास किया है कि मैं इसे "मूल" पोस्ट के साथ साझा करना चाहता हूं।

यह कक्षाओं "चाल" और "ऊपर" वर्गों के साथ तत्वों का चयन करता है। 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>

Answer 6

2 डॉट्स वास्तव में 2 वर्गों (चयनकर्ता) एक साथ

के लिए मिलान कर रहे हैं जमा जवाब पढ़ने के बाद, मैं अभी भी बहुत स्पष्ट नहीं कर रहा हूँ और एक शोध करते हैं और .container div { } and div.container { } पढ़ने के बाद एक विचारशील समझ के साथ आओ, जिसने डॉट (इस मामले)के अंतर पर चर्चा कीस्पेस चयनकर्ताओं के बीच (प्रथम चयनकर्ता के बच्चे के लिए मिलान)।

याद CSS चयनकर्ता के बारे में अंगूठे का नियम:

1. अंतरिक्ष (चयनकर्ता में) का अर्थ है सही चयनकर्ता बाईं चयनकर्ता की संतान है
2. डॉट एक वर्ग चयनकर्ता
3. अन्यथा दान , टैग चयनकर्ताउदाहरण < DIV> या < H3> या < td>

जिसमें नियम 2 & 3 किसी भी तरह परस्पर विनिमय कर रहे हैं

---

मूल परिदृश्य:

.nav.pull-right 

1 डॉट वर्ग रूपांतरण चयनकर्ता टैग करने के लिए चयनकर्ता (नियम 3 के साथ इंटरचेंज नियम 2) bec ome टैग + डॉट परिदृश्य

ul.pull-right 

अंत में, परिणाम कर रहे हैं तुच्छ है, यह पुल सही वर्ग परिभाषित

पी एस के साथ सभी उल टैग से मिलान मैं फिर से भ्रमित नहीं होगा, उम्मीद है कि प्रत्येक पाठक इसे फिर से भ्रमित नहीं करेगा