सीएसएस अल्पविराम से अलग चयनकर्ताओं प्रपत्र इनपुट के लिए काम नहीं करते: नहीं (...)

Question

सीएसएस:

form input:not([type='button']),form input:not([type='submit']) { width: 200px } 

एचटीएमएल:

<form> 
    <input type='button' value='button' /> 
    <input type='submit' value='submit' /> 
    <input type='text' value='text' /> 
</form> 

डेमो: http://jsbin.com/imibew/edit#javascript,html,live

अंक: सभी इनपुट तत्वों को 200px की चौड़ाई मिल रही है, जहां मैं सिर्फ टाइप टेक्स्ट के इनपुट को 200px रखना चाहता हूं।

क्विर्क: यदि आप केवल एक चयनकर्ता को सूचीबद्ध करते हैं, और अल्पविराम से अलग सूची नहीं है, तो यह सही तरीके से काम करता है।

प्रश्न: क्या मैं उपयोग करते समय कॉमा का उपयोग कर सकता हूं: नहीं() सीएसएस में है? चयनकर्ता में सूचियों का उपयोग करना इसे तोड़ने लगता है।

Answer 1

अल्पविराम एक तार्किक या चयनकर्ता वाक्यविन्यास का प्रतिनिधित्व करता है। इस प्रकार प्रत्येक तत्व को आपके चयनकर्ता के प्रत्येक भाग के साथ एक समय में मिलान किया जाएगा, और यदि यह उन हिस्सों में से कम से कम एक को संतुष्ट करता है, तो नियम लागू होता है।

अपने मामले में

तो, यह क्या होता है:

1. input[type='button'] स्पष्ट रूप से अपने form input:not([type='submit']) चयनकर्ता से मेल

2. input[type='submit'] अपने form input:not([type='button']) चयनकर्ता से मेल खाएगी

3. जाएगा input[type='text'] होगा () मैच दोनों चयनकर्ता

यही कारण है कि आपका नियम सभी पर आपके फॉर्म इनपुट पर लागू हो जाता है।

form input:not([type='button']):not([type='submit']) { width: 200px }