2010-10-30 10 views
76

उदाहरण के लिए अगर मैं निम्न HTML है:क्या एक सीएसएस नियम को दूसरे के भीतर संदर्भित करना संभव है?

<div class="someDiv"></div> 

और इस सीएसएस:

.opacity { 
    filter:alpha(opacity=60); 
    -moz-opacity:0.6; 
    -khtml-opacity: 0.6; 
    opacity: 0.6; 
} 
.radius { 
    border-top-left-radius: 15px; 
    border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px;  
} 

.someDiv { 
    background: #000; height: 50px; width: 200px; 

/*** How can I reference the opacity and radius classes here 
    so this div has those generic rules applied to it as well ***/ 

} 
की तरह कैसे पटकथा भाषाओं में आप सामान्य कार्यों का इस्तेमाल किया है कि अक्सर स्क्रिप्ट के शीर्ष पर लिखा जाता है है

और हर बार जब आपको उस फ़ंक्शन का उपयोग करने की आवश्यकता होती है तो आप हर बार सभी कोड दोहराने के बजाय फ़ंक्शन को कॉल करते हैं।

+0

में कई वर्गों को जोड़ने के लिए यह नहीं करना संभव है:

someDiv { @extend .opacity; @extend .radius; } 

Ohterwise, आप जावास्क्रिप्ट (jQuery) के रूप में अच्छी तरह से इस्तेमाल कर सकते हैं एचटीएमएल बदलें? – BoltClock

+0

आप '। त्रिज्या' में कक्षाओं की अल्पविराम से अलग सूची जोड़ सकते हैं, जैसे '। त्रिज्या, .other, .element {/ * css * /}'। यह आपको अतिरिक्त कोड बचाएगा, लेकिन इसे संभवतः कम पठनीय बनाता है। – Lekensteyn

+0

संभावित डुप्लिकेट [क्या एक सीएसएस वर्ग एक या अधिक कक्षाओं का उत्तराधिकारी हो सकता है?] (Https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes) –

उत्तर

61

नहीं, आप किसी नियम से दूसरे नियम को संदर्भित नहीं कर सकते हैं।

आप कर सकते हैं, हालांकि, कई नियम-सेट पर पुन: उपयोग के चयनकर्ताओं एक स्टाइलशीट और उपयोग एक भी नियम-सेट पर एक से अधिक चयनकर्ताओं (separating them with a comma द्वारा) के भीतर।

.opacity, .someDiv { 
    filter:alpha(opacity=60); 
    -moz-opacity:0.6; 
    -khtml-opacity: 0.6; 
    opacity: 0.6; 
} 
.radius, .someDiv { 
    border-top-left-radius: 15px; 
    border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px;  
} 

आप एक एकल HTML तत्व में कई कक्षाएं भी लागू कर सकते हैं (कक्षा विशेषता एक स्पेस से अलग सूची लेती है)।

<div class="opacity radius"> 

इनमें से किसी भी दृष्टिकोण को आपकी समस्या का समाधान करना चाहिए।

यह शायद मदद मिलेगी अगर आप वर्ग ऐसे नाम हैं जो वर्णित क्यों एक तत्व यह कैसे स्टाइल किया जाना चाहिए के बजाय स्टाइल किया जाना चाहिए इस्तेमाल किया। स्टाइलशीट में को छोड़ दें।

+0

मैं असहमत नहीं हूं लेकिन मुझे टिप्पणी करने की आवश्यकता है, कि यह मुझे नियमों की प्रतिलिपि बनाने की अनुमति नहीं देता है 'fieldet legend' को 'label.legend'' पर। मैं समझता हूं लेकिन अफसोस करता हूं। – rishta

+1

@ ऋषता - एर ... मैंने कहा कि इस उत्तर के पहले पैराग्राफ में। – Quentin

+0

आप उन तत्वों के लिए एक नियम-सेट भी घोषित कर सकते हैं जिनके पास केवल दो वर्ग हैं: '.omeDiv.other {/ * शैली ... * /} 'इस तरह, केवल वे तत्व जिनके दोनों वर्ग प्रभावित हैं – Sirmyself

13

आप जब तक आप बढ़ाया सीएसएस किसी तरह का प्रयोग कर रहे हैं नहीं कर सकते अपने html में कक्षाएं जोड़ें। हालांकि, उन दो अतिरिक्त कक्षाओं को .someDiv पर लागू करना बहुत उचित है।

यदि .someDiv अद्वितीय है तो मैं आईडी को उपयोग करके इसे एक आईडी देने और इसे सीएसएस में संदर्भित करने का भी चयन करता हूं।

7

यदि आप तैयार हैं और एक छोटे से jQuery रोजगार करने में सक्षम हो, तो आप बस यह कर सकते हैं:

$('.someDiv').css([".radius", ".opacity"]); 

आप एक जावास्क्रिप्ट कि पहले से ही पेज प्रक्रियाओं या आप < स्क्रिप्ट > में कहीं संलग्न कर सकते हैं टैग। यदि ऐसा है, तो ऊपर दिए गए दस्तावेज़ में दस्तावेज़ तैयार करें:

$(document).ready(function() { 
    $('.someDiv').css([".radius", ".opacity"]); 
} 

मैं हाल ही में एक WordPress प्लगइन अद्यतन करते समय इस पर आया था। उन्हें बदल दिया गया है जो सीएसएस में बहुत सारे "महत्वपूर्ण" निर्देशों का उपयोग करते थे। घोषित करने के प्रतिभा के निर्णय के कारण मुझे अपनी शैलियों को मजबूर करने के लिए jquery का उपयोग करना पड़ा! कई टैग पर महत्वपूर्ण।

1

आप आसानी से @extend का उपयोग कर SASS pre-processor के साथ ऐसा कर सकते हैं।निश्चित रूप से है

$('someDiv').addClass('opacity radius') 

सबसे आसान सही एचटीएमएल

<div class="opacity radius"> 
संबंधित मुद्दे