Có cách nào để chỉ định viết tắt CSS cho "tất cả các phần tử ngoại trừ phần tử đầu tiên/cuối cùng" không?

Question

Rất thường, bạn cần phải chỉ định kiểu CSS cho tất cả các phần tử ngoại trừ phần tử đầu tiên (hoặc cuối cùng). Ví dụ, khi tạo kiểu đoạn văn, bạn muốn thêm lề dưới vào mỗi phần tử ngoại trừ phần tử cuối cùng (hoặc tương tự, lề trên cho mọi phần tử ngoại trừ phần tử đầu tiên).

Có cách nào để làm điều đó đó là:

• hơn súc tích hơn quy định p {...} và sau đó p:first-child {...}?
• đơn giản và trực quan hơn p:nth-child(-n+1)?

Nếu không có, bạn có biết bất kỳ nỗ lực nào khi thêm nó không?

Answer 1

Đối với tất cả p yếu tố ngoại trừ đứa con đầu lòng, sử dụng một trong những (cái thứ hai là tốt hơn hỗ trợ):

p:not(:first-child) 
p:first-child ~ p 

Đối với tất cả p yếu tố ngoại trừ con cuối cùng:

p:not(:last-child) 

Đối với tất cả các yếu tố p trừ trẻ em đầu tiên và trẻ em cuối cùng:

p:not(:first-child):not(:last-child) 

Như thường lệ, :not() và :last-child của CSS3 không được hỗ trợ cho đến IE9 + và các phiên bản tương đối mới của các trình duyệt khác. Bạn sẽ không tiếp cận được rất nhiều về hỗ trợ trình duyệt (IE8 trở lên) trừ khi bạn thêm các lớp học cho con đầu tiên và cuối cùng của bạn, sử dụng JavaScript hoặc cách khác.

Hãy nhớ rằng vertical margins collapse between in-flow paragraphs and their ancestor(s), vì vậy, trừ khi bạn muốn không ngoài lề của phần tử vùng chứa cho các đoạn này, bạn không cần phải vượt quá lề của các thành phần đầu tiên và cuối cùng là p cụ thể. Đây là fiddle để minh họa.

Answer 2

Vâng, bạn có thể làm:

p:not(:first-child) {...} 

Nhưng chỉ các trình duyệt mới nhất hỗ trợ psuedo-class :not.

Khác hơn thế, không. Lựa chọn tốt nhất của bạn là chỉ định kiểu cho tất cả và sau đó ghi đè nó cho đầu tiên/cuối cùng.

Answer 3

Nếu không hỗ trợ IE7-8, bạn có thể sử dụng :not() CSS selector.

Nhưng nếu bạn cần hỗ trợ IE7 +, có thể vẫn là trường hợp có một mẹo nhỏ bạn có thể sử dụng và thường mang lại cho bạn khá xa. Một thực tế ít được biết đến là bộ chọn psuedo :first-child thực sự hoạt động trong IE7 + (không phải là :last-child) như là some other css selectors và điều này làm cho các công cụ như thêm lề thẳng đứng trong bố cục nổi theo chiều ngang có thể.

Imagine html này:

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

Và đây là một số CSS:

/* General reset */ 
ul, li { list-type: none; margin: 0; padding: 0; } 
/* Make horizontal */ 
ul > li { float: left; } 

Vì vậy, bây giờ tất cả các mặt hàng danh sách là theo chiều ngang bên cạnh nhau, và bây giờ chúng tôi muốn thêm một lề trong GIỮA tất cả các mục nhưng không ở bên phải hoặc bên trái, chúng tôi có thể làm điều này trong css:

/* General reset */ 
ul, li { list-type: none; margin: 0; padding: 0; } 
/* Make horizontal */ 
ul > li { float: left; margin-left: 10px; } 
ul > li:first-child { margin-left: 0; } 

Điều này thường bao gồm s 95% các trường hợp mà tôi muốn một cái gì đó độc đáo, sau đó phần còn lại của 'forgotten' selectors cover another few percent, sau đó bạn cần phải thêm một số lớp học mà thường không phải là một nút cổ chai nào trong phần phụ trợ của trang.

Answer 4

tôi sẽ đề nghị sử dụng first-of-type:

p:not(:first-of-type) { ... } 

Browser support (caniuse)