CSS: ไม่ใช่ (: ลูกคนสุดท้าย): หลังจากตัวเลือก

369

ฉันมีรายการองค์ประกอบซึ่งมีสไตล์ดังนี้:

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>

ขยายตัวอย่างข้อมูล

ใครรู้วิธีการเลือก CSS ทั้งหมดยกเว้นองค์ประกอบสุดท้าย?

คุณสามารถดูคำจำกัดความของ:not()ตัวเลือกได้ที่นี่

css css-selectors pseudo-element

— แมตต์คลาร์กสัน
แหล่งที่มา

1

พฤติกรรมนี้ดูเหมือนจะเป็นจุดบกพร่องใน Chrome 10 มันใช้งานได้สำหรับฉันใน Firefox 3.5

— duri

6

อันที่จริงเพียงแค่วิ่งตัวอย่างในปี 2018 กับ Chrome ล่าสุดและทำงานตามที่คาดไว้

— atoth

433

หากเป็นปัญหากับตัวเลือกที่ไม่ใช่คุณสามารถตั้งค่าทั้งหมดและแทนที่ตัวสุดท้าย

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

หรือถ้าคุณสามารถใช้ก่อนไม่จำเป็นต้องมีลูกคนสุดท้าย

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

— Imma
แหล่งที่มา

12

นี่เป็นวิธีเดียวที่จะทำให้มันทำงานได้ไกลเท่า IE8 (ขออภัยไม่มี cheetos สำหรับ IE7 และรุ่นก่อนหน้านี้) li:not(:first-child):beforeค่อนข้างน่ากลัวเกินไปสำหรับ Internet Explorer รุ่นเก่าที่จะแก้ไขปัญหา

— Sandy Gifford

240

ทุกสิ่งดูเหมือนถูกต้อง คุณอาจต้องการใช้ตัวเลือก css ต่อไปนี้แทนสิ่งที่คุณใช้

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

— วิเวก
แหล่งที่มา

4

@ScottBeeson นี่คือ awnser ที่ดีที่สุดสำหรับเบราว์เซอร์ที่ทันสมัย แต่คำตอบที่ได้รับการยอมรับใช้ได้กับเบราว์เซอร์รุ่นเก่า (ฉันเห็นด้วยกับคุณควรเป็นที่ยอมรับ)

— Arthur

25

ตัวอย่างของคุณที่เขียนอย่างดีเยี่ยมใน Chrome 11 สำหรับฉัน บางทีเบราว์เซอร์ของคุณอาจไม่รองรับ:not()เครื่องมือเลือก

คุณอาจต้องใช้ JavaScript หรือคล้ายกันเพื่อให้ได้เบราว์เซอร์นี้ jQuery ใช้: ไม่ ()ใน API ตัวเลือก

— Liza Daly
แหล่งที่มา

8

ฉันแก้ไขมันด้วยการทำli:not(:first-child):beforeและเพิ่มแถบแนวตั้งก่อน ฉันทำงานกับ Chrome รุ่นเสถียรซึ่งดูเหมือนจะไม่รองรับลูกคนสุดท้าย สร้าง Canary ทำ ขอบคุณสำหรับคำตอบ

— Matt Clarkson

ดูเหมือนว่า Chrome ไม่รองรับแม้กระทั่งในปี 2013

— MikkoP

20

ตัวอย่างการใช้ CSS

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

— Lorena Pita
แหล่งที่มา

20

สำหรับฉันมันใช้งานได้ดี

&:not(:last-child){
            text-transform: uppercase;
        }

— Ashad Nasim
แหล่งที่มา

1

คำตอบนี้อาจเกี่ยวข้องกับ SCSS มากกว่า CSS

— Chris Walsh

10

ตัวอย่างของคุณไม่ทำงานใน IE สำหรับฉันคุณต้องระบุส่วนหัวของ Doctypeในเอกสารของคุณเพื่อแสดงผลหน้าของคุณด้วยวิธีมาตรฐานใน IE เพื่อใช้คุณสมบัติ CSS เนื้อหา:

<!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>

วิธีที่สองคือใช้ตัวเลือก CSS 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 จะดูแลความเข้ากันได้

— Martin Kunc
แหล่งที่มา

6

<! DOCTYPE html> เป็นมาตรฐาน HTML5 ใหม่

— Matt Clarkson

1

นี่เป็นวิธีที่ยอดเยี่ยมและทันสมัยในการจัดการกับสิ่งนี้ ฉันกำลังดิ้นรนกับ: ลูกคนสุดท้ายจากนั้นฉันก็พบคำตอบของคุณ อันนี้สมบูรณ์แบบ! : ไม่ (: ชนิดสุดท้าย): หลัง

— Firze

1

ลบการ: ก่อนที่ลูกคนสุดท้ายและ: หลังจากและใช้

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

หวังว่ามันจะทำงานได้ดี

— Jaylukmann
แหล่งที่มา

-2

คุณสามารถลองสิ่งนี้ได้ฉันรู้ว่าไม่ใช่คำตอบที่คุณต้องการ แต่แนวคิดนั้นเหมือนกัน

ตำแหน่งที่คุณตั้งค่าสไตล์สำหรับเด็กทุกคนแล้วลบออกจากเด็กคนสุดท้าย

ตัวอย่างโค้ด

li
  margin-right: 10px

  &:last-child
    margin-right: 0

ภาพ

— Yashu Mittal
แหล่งที่มา

2

สวัสดีฉันขอทราบตัวแก้ไขนี้ได้ไหม มันดูดี

— Zanecat

มันเป็นรหัสขนาดเล็กและทุกคนสามารถจดจำและพิมพ์ได้อย่างง่ายดาย

— Yashu Mittal