CSS, 132 116 115 byte
a:not(:last-child):nth-child(n+2):after,a:nth-last-child(n+3):after{content:","}a+:last-child:before{content:"and "
<p>
<a>one</a>
</p>
<p>
<a>one</a>
<a>two</a>
</p>
<p>
<a>one</a>
<a>two</a>
<a>three</a>
</p>
<p>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four</a>
</p>
a:not(:last-child):nth-child(n+2):after,a:nth-last-child(n+3):after{content:","}a+:last-child:before{content:"and "
CSS không được nhìn thấy quá thường xuyên trong golf golf vì nó chỉ có thể định dạng văn bản, nhưng nó thực sự hoạt động cho thử thách này và tôi nghĩ rằng nó sẽ rất thú vị để làm. Xem nó trong hành động bằng cách sử dụng đoạn mã ở trên (nhấp vào "Hiển thị đoạn mã").
Danh sách phải ở trong một tệp HTML được liên kết với mỗi thành phần được bao quanh bởi <a>
các thẻ và được phân tách bằng dấu ngắt dòng. Các mục danh sách phải là thành phần duy nhất trong phần tử cha của chúng, vd
<a>one</a>
<a>two</a>
<a>three</a>
Giải trình
a:not(:last-child):nth-child(n+2)::after,
a:nth-last-child(n+3)::after {
content: ",";
}
a + :last-child::before {
content: "and ";
}
Chúng ta hãy xem xét phiên bản không có người ở trên. Nếu bạn không quen với cách CSS hoạt động, mọi thứ bên ngoài dấu ngoặc nhọn là một bộ chọn xác định tập hợp các phần tử HTML mà khai báo bên trong dấu ngoặc nhọn áp dụng. Mỗi cặp chọn-khai báo được gọi là một quy tắc . (Nó phức tạp hơn thế nhưng sẽ đủ cho lời giải thích này.) Trước khi bất kỳ kiểu dáng nào được áp dụng, danh sách chỉ xuất hiện cách nhau bởi các khoảng trắng.
Chúng tôi muốn thêm dấu phẩy sau mỗi từ trừ từ cuối cùng, ngoại trừ danh sách hai từ, không nhận được dấu phẩy. Bộ chọn đầu tiên a:not(:last-child):nth-child(n+2):after
, chọn tất cả các thành phần ngoại trừ đầu tiên và cuối cùng. :nth-child(n+2)
là một cách nói ngắn hơn :not(:first-child)
và về cơ bản nó hoạt động bằng cách chọn các yếu tố có chỉ số (bắt đầu từ 1) lớn hơn hoặc bằng 2. (Có, nó vẫn làm tôi bối rối một chút. Các tài liệu MDN có thể giúp đỡ.)
Bây giờ chúng ta chỉ cần chọn phần tử đầu tiên để có dấu phẩy nếu có tổng số ba phần tử trở lên. a:nth-last-child(n+3):after
hoạt động như thế :nth-child
, nhưng đếm từ phía sau, vì vậy nó chọn tất cả các yếu tố ngoại trừ hai yếu tố cuối cùng. Dấu phẩy lấy liên kết của hai bộ và chúng tôi sử dụng :after
phần tử giả để thêm content
ngay sau mỗi phần tử được chọn.
Quy tắc thứ hai dễ dàng hơn. Chúng ta cần thêm "và" vào trước phần tử cuối cùng trong danh sách, trừ khi nó là một phần tử duy nhất. Nói cách khác, chúng ta cần chọn phần tử cuối cùng trước phần tử khác. +
là bộ chọn anh chị em liền kề trong CSS.