<div id="main">
<p> one </p>
<p> two </p>
<p> three </p>
<p> four </p>
<p> five </p>
<div>
मैं नहीं है पहले <p>One</p>पहले बच्चे को कैसे छोड़ें?
p {color:red}
पर सीएसएस लागू करने के लिए मैं :first-child के ठीक सामने की जरूरत है चाहता हूँ।
the negation pseudo-class के साथ:
p:not(:first-child) { color: red; }
ब्राउज़र समर्थन अब very strong है, लेकिन विकल्प शामिल हैं:
p { color: red; }
p:first-child { color: black; }
और:
* + p { color: red; }
क्वेंटिन के :not() समाधान आधुनिक ब्राउज़रों के लिए महान काम करता है:
p:not(:first-child) { color: red; }
पुराने ब्राउज़र के लिए उनका विकल्प भी अच्छा काम करता है, सिवाय इसके कि यह पहले बच्चे के लिए ओवरराइडिंग नियम का उपयोग करता है। यह आवश्यक नहीं है, हालांकि ...
आप बस p:first-child के लिए ओवरराइड कर आवश्यकता के बिना, ऊपर से एक के रूप में एक ही नियम लागू करना एक भाई का भी उपयोग कर सकते हैं। या तो इन नियमों में से एक काम करेंगे:
adjacent sibling selector, जो किसी भी p कि सीधे के बाद आता है से मेल खाता है एक p:
p + p { color: red; }
general sibling selector, जो किसी भी p कि एक p के बाद कहीं भी आता है से मेल खाता है :
p ~ p { color: red; }
दोनों संयोजक यहां समान रूप से काम करते हैं; उनके बीच सूक्ष्म अंतर केवल तभी लागू होते हैं जब आपके मिश्रण में अन्य तत्व होते हैं। विवरण के लिए दिए गए लिंक का संदर्भ लें।
तुम भी उपयोग कर सकते हैं "टिल्ड" (~) ऑपरेटर
<!DOCTYPE html>
<html>
<head>
<style>
p ~ p {
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
यहाँ JSFiddle डेमो http://jsfiddle.net/RpfLa/344/
एफएफ 17 पर एक त्वरित परीक्षण, क्रोम 23, सफारी 5.1, IE9, IE1- किया है 8 compaitbility मोड
बहुत कुशल नहीं है, क्योंकि 6 वां 'पी' मिलान 5 गुना है। – Rudie
यह अच्छा बिंदु है ... – MonteCristo
वर्क्स हर पर और की जरूरत नहीं है नाश:
p + p {
/* do 15 special things */
}
यह प्रत्येक पी को लेता है जो पी से पहले था। बाद में इसे पूर्ववत करने के लिए कोई संपत्ति सेट न करें। आपको केवल जोड़ना चाहिए, अगर आप इसकी मदद कर सकते हैं, घटाएं नहीं।
मुझे लगता है कि :nth-child() चाल करेगा।
p:nth-child(n+2){
background-color:red;
}
यह पहली को छोड़कर p टैग की सभी शैलियों क्योंकि यह 2 बच्चे पर शुरू होता है। फिर आप पहले p टैग को p:first-child के साथ अलग-अलग शैली बना सकते हैं।
दूसरे समाधान के लिए, मैं 'पी: प्रथम-बच्चे {रंग: वारिस का उपयोग करने का सुझाव दूंगा; } 'के बजाय' पी: पहला बच्चा {रंग: काला; } 'तो यह किसी भी प्रीसेट रंग के साथ काम करता है। –