सीएसएस उल ली: डबल सीमाओं से बचना

Question

मैं एक यूएल

border: 1px solid grey; 

यह कई फूल होता है साथ

border-bottom: 1px dotted grey; 

के साथ आइटम के अलावा नेत्रहीन रखना है। लेकिन अब आखिरी एलआई में बिंदीदार सीमा और उल ठोस सीमा है! यह कष्टप्रद लग रहा है। मैं इससे कैसे बच सकता हूं? क्या उनके पीछे एलआईएस के बीच सीमाएं लगाने का कोई तरीका है?

Answer 1

CSS3 के चयनकर्ताओं :first-child या :last-child, इस तरह लक्षित कर सकते हैं:

ul { 
    border: 1px solid grey; 
} 
li { 
    border-bottom: 1px dotted grey; 
} 
li:last-child { 
    border:none; 
} 

एक काम कर उदाहरण: http://api.fatherstorm.com/test/4165384.php

Answer 2

दूर करने के लिए एक वर्ग या CSS3 चयनकर्ता :last-child का प्रयोग पिछले <li> सीमा-नीचे

ul li:last-child { border-bottom:0; } 

या

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li class="last">3</li> 
</ul> 

ul li.last { border-bottom:0; } 

Answer 3

बस एक अलग वर्ग पिछले li जो एक नहीं दिखाने के लिए निर्दिष्ट करता है करने के लिए जोड़ सीमा।

Answer 4

एक चिकनी समाधान सूची शैली plus (+) selector उपयोग करने के लिए है:

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

आप बस the following css जोड़ें:

li + li { 
    border-top: 1px dotted grey; 
} 

आप एक अतिरिक्त चयनकर्ता जोड़ने से बचें और कोड को और अधिक साफ रखने में सक्षम हैं। हालांकि आपकी जरूरतों के आधार पर आप पहले browser compatibilty जांचना चाहेंगे।