यह CSS चयनकर्ता क्या है? [वर्ग * = "अवधि"]

190

मैंने इस चयनकर्ता को ट्विटर बूटस्ट्रैप में देखा:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

क्या किसी को पता है कि इस तकनीक को क्या कहा जाता है और यह क्या करता है?

css css-selectors

— जॉन
स्रोत

1

api.jquery.com/attribute-contains-selector

— biziclop

1

कई शांत सीएसएस चयनकर्ता उपलब्ध हैं: w3.org/TR/selectors/#selectors

— टिम

jsbin.com/otizoz/edit#javascript,html,live

— रोको सी। बुल्जन

इसी प्रकार के नहीं बल्कि एक पूरी डुप्लिकेट, stackoverflow.com/questions/7366323/... (जो यहाँ वापस लिंक)

— BoltClock

332

यह एक विशेषता वाइल्डकार्ड चयनकर्ता है। आपके द्वारा दिए गए नमूने में, यह किसी भी बाल तत्व के लिए दिखता है जिसके तहत .show-gridएक वर्ग है जो CONTAINS है span।

तो <strong>इस उदाहरण में तत्व का चयन करेंगे :

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

आप 'के साथ शुरू होता है ...' के लिए खोज भी कर सकते हैं

div[class^="something"] { }

जो कुछ इस तरह से काम करेगा: -

<div class="something-else-class"></div>

और 'के साथ समाप्त होता है ...'

div[class$="something"] { }

जो काम करेगा

<div class="you-are-something"></div>

अच्छा संदर्भ

— isNaN1247
स्रोत

1

मुझे पता है कि यह पुराना उत्तर है, लेकिन मैं संदर्भ सूची में इस संदर्भ को जोड़ूंगा

— Dread Boy

2

लोगों को यह उपयोगी लगने पर

— user3339411

6

div[class^="something"] { }चयनकर्ता "के साथ शुरू होता है" तभी काम करता है तत्व एक ही वर्ग में शामिल है, या एक से अधिक है, जब उस वर्ग बाईं ओर के पहले से एक है।

— नन्ह

2

मैं जोड़ना होगा div[class~="something"]सूचियों (जैसे वर्ग) और अंतरिक्ष में मैचों की खोज अलग के लिए div[class|="something"एक हाइफन पर मिलान के लिए में पृथक सूची जैसे मिलान कुछ आप-हैं-कुछ classname ऊपर

— रस्किन

31

.show-grid [class*="span"]

यह एक सीएसएस चयनकर्ता है जो क्लास शो-ग्रिड के साथ सभी तत्वों का चयन करता है , जिसमें एक बच्चा तत्व होता है जिसकी कक्षा में नाम अवधि होती है ।

— Spikeh
स्रोत

15

वास्तव में, यह चयन करता है और "चाइल्ड तत्व जो वर्ग है नाम अवधि शामिल है" नहीं "वर्ग शो ग्रिड के साथ सभी तत्वों"

— Utopik

3

निम्नलिखित:

.show-grid [class*="span"] {

इसका मतलब है कि '.show-grid' के सभी बाल तत्व एक वर्ग के साथ हैं, जो इसमें 'स्पैन' शब्द को शामिल करता है, जो सीएसएस गुणों को प्राप्त करेगा।

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

सभी तत्व अपने आप को छोड़कर हिट हो <span>जाते हैं।

सादर टू बूटस्ट्रैप:

span6: यह बूटस्ट्रैप 2 की मचान तकनीक थी जिसने एक खंड को क्षैतिज ग्रिड में विभाजित किया, जो कि 12. के कुछ हिस्सों पर आधारित था। span6इसकी चौड़ाई 50% होगी।
बूटस्ट्रैप (v.3 और v.4) के वर्तमान दिन के कार्यान्वयन में, अब आप उन .col-*कक्षाओं (जैसे col-sm-6) का उपयोग करते हैं , जो एक निश्चित आकार से नीचे खिड़की के सिकुड़ने पर जवाबदेही को संभालने के लिए एक मीडिया ब्रेकप्वाइंट भी निर्दिष्ट करता है। अधिक प्रलेखन के लिए बूटस्ट्रैप 4.1 और बूटस्ट्रैप 3.3.7 की जाँच करें । मैं आजकल बूटस्ट्रैप के साथ जाने की सलाह दूंगा

— टायलर
स्रोत

2

यह उन सभी तत्वों का चयन करता है जहाँ वर्ग नाम में "span"कहीं न कहीं स्ट्रिंग है। ^=एक स्ट्रिंग की शुरुआत के लिए भी है , और एक स्ट्रिंग $=के अंत के लिए भी है। यहां कुछ सीएसएस चयनकर्ताओं के लिए एक अच्छा संदर्भ दिया गया है: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

मैं केवल उन बूटस्ट्रैप कक्षाओं से परिचित हूं, spanXजहां एक्स एक पूर्णांक है, लेकिन अगर अन्य चयनकर्ता थे जो समाप्त हो गए span, तो यह भी इन नियमों के अंतर्गत आएगा।

यह सिर्फ कंबल सीएसएस नियमों को लागू करने में मदद करता है।

— केविन ली
स्रोत