इसकी आंशिक वर्ग नाम सीएसएस

Question

मैं कुछ सीएसएस बटन बनाने रहा हूँ और उन्हें शैली को यथासंभव छोटा चाहते हैं द्वारा तत्व प्राप्त करने के लिए कैसे तो मैं इस

[class*='mybuttons-button']{ 
    margin-top:5px; 
    -webkit-border-radius:4px; 
    -khtml-border-radius:4px; 
    -moz-border-radius:4px; 
    border-radius:4px; 
    display:inline-block; 
    padding:6px 12px; 
    color:#fff; 
    vertical-align:middle; 
    cursor:pointer; 
} 

तरह शुरू कर दिया जो सभी तत्वों को क्लास को प्रभावित करेगा my-button

अब मैं यह करने के लिए में गहरी हो और इस

[class*='-large']{ 
    padding: 10px 16px; 
    font-size:120%; 
    line-height: 1.33; 
    -webkit-border-radius:6px; 
    -khtml-border-radius:6px; 
    -moz-border-radius:6px; 
    border-radius:6px; 
} 
[class*='mybuttons-button-color']{ 
    background:blue; 
} 

क्या करना चाहते हैं, लेकिन कक्षा के बाद से -large आ सकते हैं कुछ 3 पार्टी सीएसएस उपयोगकर्ता द्वारा जोड़ा में मैं और अधिक विशिष्ट हो सकता है और कुछ इस तरह कहते हैं कि बजाय

[class*='mybuttons-button-*ANYTHING*-large'] 

ताकि मैं न इस

mybuttons-button-color-large 
mybuttons-button-red-large 
mybuttons-button-green-large 
mybuttons-button-color-medium 
mybuttons-button-red-medium 
mybuttons-button-green-medium 

करने के लिए किसी को भी एक तरह से पता है करना चाहते हैं यह करो? क्या यह संभव है कि मध्य शब्द को नाखुश करने के लिए केवल इतना ही है?

मैं जानता हूँ कि मैं अंतरिक्ष कर सकते हैं वर्ग के नाम आदि, लेकिन मेरे लिए, क्योंकि यह एक कोशिश देने के लिए प्यार होता है, इस **

<span class="mybuttons-button-color-large"></span> 

इस से क्लीनर दिखता है:

<span class="mybuttons-button color large"></span> 

Answer 1

उसी तरह आप केवल बातें सभी 3 वर्गों है कि लक्षित करने के लिए इस .class.class2.class3 { /*styles*/ } कर सकते हैं, आप को जोड़ सकते हैं कर सकते हैं चयनकर्ताओं विशेषता भी ऐसा ही करने के लिए:

[class*="mybuttons-button"][class*="-large"] { /*styles*/ } 

दी यह एक मामले में काम नहीं करेगा इस तरह:

<span class="my-buttons-button-color-small something-else-large"></span> 

के बाद से यह mybuttons-button और -large दोनों शामिल हैं।

यदि आपको नहीं लगता कि ऐसा होगा या कोई समस्या हो तो आपको ठीक होना चाहिए। यहां एक पहेली है: http://jsfiddle.net/3wEJe/

निश्चित रूप से इसकी अनुशंसा नहीं करेगा।

Answer 2

हैं आप अपने वर्ग के नामों को अलग करते हैं, फिर आप सीरीज चयनकर्ताओं का उपयोग केवल दो वर्गों के साथ तत्व को पकड़ने के लिए कर सकते हैं, जंगली कार्ड्स पर भरोसा करने के बजाय,

<span class="mybuttons-button color large"></span> 

.mybuttons-button.large { 
    font-size: 120% 
} 

याद रखें कि ".class1.class2" ".class1 .class2" (स्पेस के साथ) से अलग है: पहला कक्षाओं के साथ तत्व के लिए पहला दिखता है; कक्षा 1 के वंशजों के लिए दूसरा दिखता है जो कक्षा 2 हैं।