सास

Question

साथ तत्व से केवल प्रत्यक्ष बच्चों का चयन करें कहते हैं कि मैं निम्न HTML है की सुविधा देता है

header { 
    height: 4.1rem; 

    div { 
     width: 33%; 
     float: left; 
     height: 4.1rem; 
     line-height: 4.1rem; 
     color: #fff; 

     &.title { 
      h1 { 
       font-weight: normal; 
       font-size: 3rem; 
       padding: 0; 
       margin: 0; 
      } 
     } 

     &.logo { 
      text-align: center; 
     } 

     &.account { 
     } 
    } 
} 

अब समस्या मेरे पास है कि divs options है और searchaccount का 33% प्रतिशत है जो तर्क है क्योंकि मेरे पास div {width: 33%} है। मैं जानता हूँ कि मैं के साथ सीधे बच्चे तत्वों का चयन कर सकते हैं:

header { 
    > div { 
    } 
} 

लेकिन यह मदद नहीं करता है, भले ही मैं अन्य सभी वर्गों के > सामने डाल दिया। मुझे यह भी पता है कि मैं कह सकता हूं कि चौड़ाई 0 या .account में फिर से होनी चाहिए, लेकिन मैं इसे रोकना चाहता हूं।

Answer 1

इस प्रयास करें:

... 
    & > div {width: 33%;} 

    div { 
     float: left; 
     height: 4.1rem; 
     line-height: 4.1rem; 
     color: #fff; 
     ... 

div चौड़ाई बाहर ले लो और केवल प्रत्यक्ष बच्चों पर यह लागू होते हैं। बाकी के रूप में छोड़ दें। यहां त्वरित fiddle है (बाद में .option और .search शैलियों को हटाएं, केवल विज़ुअलाइज़ेशन के लिए)।

कृपया अपना प्रश्न संपादित करें और बेहतर बताएं कि आप वास्तव में क्या हासिल करना चाहते हैं।

Answer 2

मुझे यकीन नहीं है कि मैं आपको समझता हूं। लेकिन मुझे लगता है आप सीधे बच्चों और बच्चे छद्म चयनकर्ताओं का एक संयोजन, शुद्ध सीएसएस में हैं:

header > div:first-child { 
} 

या, दूसरे div के लिए:

header > div:nth-child(2) { 
} 

तुम भी not का भी उपयोग कर सकता है:

header > div:not(.account) { 
} 

किसी भी अवांछित div को बाहर करने के लिए।