CSS: not (: last-child): sau bộ chọn

369

Tôi có một danh sách các yếu tố, được tạo kiểu như thế này:

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>

Mở rộng đoạn trích

Bất cứ ai cũng biết làm thế nào để CSS chọn tất cả trừ phần tử cuối cùng?

Bạn có thể xem định nghĩa của :not()bộ chọn ở đây

css css-selectors pseudo-element

— Matt Clarkson
nguồn

1

Hành vi này dường như là một lỗi trong Chrome 10. Nó hoạt động với tôi trong Firefox 3.5.

— duri

6

Thực tế chỉ cần chạy đoạn trích vào năm 2018 với Chrome mới nhất và hoạt động như mong đợi.

— vào

433

Nếu đó là sự cố với bộ chọn không, bạn có thể đặt tất cả chúng và ghi đè lên cái cuối cùng

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

hoặc nếu bạn có thể sử dụng trước đó, không cần con cuối cùng

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

— imma
nguồn

12

Đây thực sự là cách duy nhất để làm cho nó hoạt động xa như IE8 (xin lỗi, không có cheetos cho IE7 và trước đó). li:not(:first-child):beforelà một chút quá đáng sợ cho các phiên bản cũ của Internet Explorer để giải quyết.

— Sandy Gifford

240

Mọi thứ có vẻ đúng. Bạn có thể muốn sử dụng bộ chọn css sau thay vì những gì bạn đã sử dụng.

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

— Vivek
nguồn

4

@ScottBeeson Đây là công cụ tốt nhất cho trình duyệt hiện đại, nhưng được chấp nhận trả lời làm việc với các trình duyệt cũ. (Tôi đồng ý với bạn, đây phải là người được chấp nhận)

— Arthur

25

Ví dụ của bạn dưới dạng văn bản hoạt động hoàn hảo trong Chrome 11 đối với tôi. Có lẽ trình duyệt của bạn không hỗ trợ :not()bộ chọn?

Bạn có thể cần sử dụng JavaScript hoặc tương tự để thực hiện trình duyệt chéo này. jQuery thực hiện : not () trong API bộ chọn của nó.

— Liza Daly
nguồn

8

Tôi đã giải quyết điều này bằng cách làm li:not(:first-child):beforevà thêm thanh dọc trước đó. Tôi đã làm việc với phiên bản Chrome ổn định dường như không hỗ trợ con cuối cùng. Việc xây dựng Canary không. Cảm ơn câu trả lời tho.

— Matt Clarkson

Có vẻ như Chrome không hỗ trợ nó ngay cả trong năm 2013?

— MikkoP

20

Một ví dụ sử dụng CSS

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

— Lorena Pita
nguồn

20

Đối với tôi nó hoạt động tốt

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

— Ashad Nasim
nguồn

1

Câu trả lời này có thể liên quan đến SCSS chứ không phải CSS.

— Chris Walsh

10

Mẫu của bạn không hoạt động trong IE đối với tôi, bạn phải chỉ định tiêu đề Doctype trong tài liệu của mình để hiển thị trang của bạn theo cách tiêu chuẩn trong IE để sử dụng thuộc tính CSS nội dung:

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

Cách thứ hai là sử dụng bộ chọn CSS 3

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

Nhưng bạn vẫn cần chỉ định Doctype

Và cách thứ ba là sử dụng JQuery với một số tập lệnh như sau:

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

Ưu điểm của cách thứ ba là bạn không phải chỉ định doctype và jQuery sẽ đảm nhiệm tính tương thích.

— Martin Kunc
nguồn

6

<! DOCTYPE html> là tiêu chuẩn HTML5 mới.

— Matt Clarkson

1

Đây là cách tuyệt vời và hiện đại để đối phó với điều này. Tôi đã vật lộn với: đứa con cuối cùng, sau đó tôi tìm thấy câu trả lời của bạn. Điều này là hoàn hảo! : không (: loại cuối cùng): sau

— Firze

1

Xóa: trước đứa con cuối cùng và: sau và sử dụng

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

Hy vọng, nó sẽ làm việc

— Jaylukmann
nguồn

-2

Bạn có thể thử điều này, tôi biết không phải là câu trả lời bạn đang tìm kiếm nhưng khái niệm là như nhau.

Nơi bạn đang thiết lập các kiểu cho tất cả trẻ em và sau đó loại bỏ nó khỏi đứa trẻ cuối cùng.

Đoạn mã

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Hình ảnh

— Yashu Găngal
nguồn

2

Xin chào, tôi có thể biết trình soạn thảo này là gì không? Trông thật tuyệt

— Zanecat

Nó là một đoạn mã nhỏ và bất cứ ai cũng có thể dễ dàng ghi nhớ và gõ nó.

— Yashu Găngal