सीएसएस: नहीं (: पिछले वाले बच्चे): चयनकर्ता

220

के बाद मैं तत्वों की सूची है, जो इस तरह से स्टाइल रहे हैं:सीएसएस: नहीं (: पिछले वाले बच्चे): चयनकर्ता

ul { 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li:not(:last-child):after { 
 
    content:' |'; 
 
}

<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
</ul>

की किसी को भी पता है कि कैसे सीएसएस को अंतिम तत्व के अलावा सभी का चयन करें?

तुम मेरे लिए लिखा काम करता है क्रोम 11 में पूरी तरह से के रूप में :not() चयनकर्ता here

स्रोत

2011-03-27 Matt Clarkson

यह व्यवहार क्रोम से 10 में एक बग यह Firefox 3.5 में मेरे लिए काम करता हो रहा है। – duri

309

यह नहीं चयनकर्ता के साथ एक समस्या है, तो आप सबसे अंत में बच्चे के लिए कोई ज़रूरत नहीं उन सभी को निर्धारित करने और पिछले एक

li:after 
{ 
    content: ' |'; 
} 
li:last-child:after 
{ 
    content: ''; 
}

ओवरराइड या यदि आप पहले उपयोग कर सकते हैं कर सकते हैं,

li+li:before 
{ 
    content: '| '; 
}

स्रोत

2012-03-16 12:03:48 imma

के बाद यह वास्तव में आईई 8 के रूप में काम करने के लिए एकमात्र तरीका है (क्षमा करें, आईई 7 और पहले के लिए कोई चीटो नहीं)। 'li: नहीं (: पहला बच्चा): इससे पहले कि इंटरनेट एक्सप्लोरर के पुराने संस्करणों से निपटने के लिए थोड़ा डरावना है। –

आपका उदाहरण की परिभाषा देख सकते हैं। शायद आपका ब्राउज़र सिर्फ :not() चयनकर्ता का समर्थन नहीं करता है?

आपको इस क्रॉस-ब्राउज़र को पूरा करने के लिए जावास्क्रिप्ट या इसी तरह के उपयोग की आवश्यकता हो सकती है। jQuery अपने चयनकर्ता एपीआई में :not() लागू करता है।

स्रोत

2011-03-27 14:47:12

मैंने इसे 'li: नहीं (: पहला बच्चा): पहले 'और लंबवत बार जोड़कर हल किया। मैं क्रोम के स्थिर संस्करण के साथ काम कर रहा था जो कि पिछले बच्चे का समर्थन नहीं करता है। कैनरी बिल्ड करता है। उत्तर के लिए धन्यवाद। –

ऐसा लगता है कि क्रोम 2013 में भी इसका समर्थन नहीं करता है? – MikkoP

आपका नमूना मेरे लिए IE में काम नहीं करता है, तो आप IE में मानक तरीका सामग्री सीएसएस संपत्ति का उपयोग करने के लिए अपने पृष्ठ प्रस्तुत करने के लिए अपने दस्तावेज़ में Doctype हैडर निर्दिष्ट करने के लिए है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 
<html> 

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

</html>

दूसरा जिस तरह से सीएसएस 3 चयनकर्ताओं

li:not(:last-of-type):after 
{ 
    content:   " |"; 
}

उपयोग करने के लिए है लेकिन आप अभी भी Doctype

निर्दिष्ट करने की आवश्यकता

और तीसरा रास्ता निम्नलिखित की तरह कुछ स्क्रिप्ट के साथ JQuery उपयोग करने के लिए है:

<script type="text/javascript" src="jquery-1.4.1.js"></script> 
<link href="style2.css" rel="stylesheet" type="text/css"> 
</head> 
<html> 

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("li:not(:last)").append(" | "); 
    }); 
</script>

तीसरा रास्ता का लाभ आप न कि doctype निर्दिष्ट करने के लिए है और jQuery अनुकूलता का ख्याल रखना होगा।

स्रोत

2011-03-27 15:28:02

नया HTML5 मानक है। –

यह सौदा करने के लिए यह शानदार और आधुनिक तरीका है। मैं संघर्ष कर रहा था: आखिरी बच्चा, फिर मुझे आपका जवाब मिला। यह एकदम सही है!: नहीं (: आखिरी प्रकार का): – Firze

130

हर चीज सही लगता है। आप जो भी इस्तेमाल करते हैं उसके बजाय आप निम्न सीएसएस चयनकर्ता का उपयोग करना चाह सकते हैं।

ul > li:not(:last-child):after

स्रोत

2013-06-17 10:06:39 Vivek

धन्यवाद, यह अंत में उपयोग किए गए समान है: 'li: नहीं (: पहला बच्चा): पहले '। उत्तर पोस्ट में टिप्पणी देखें। –

यह सुंदर है। निश्चित नहीं है कि यह स्वीकार्य उत्तर क्यों नहीं है! –

सीएसएस

का उपयोग कर एक उदाहरण

ul li:not(:last-child){ 
     border-right: 1px solid rgba(153, 151, 151, 0.75); 
    }

स्रोत

2017-07-26 20:57:11

सीएसएस: नहीं (: पिछले वाले बच्चे): चयनकर्ता

उत्तर

संबंधित मुद्दे