Làm thế nào để loại trừ một lớp học với tất cả trẻ em trong độ nét phong cách

Question

Tôi có một tập tin như

<div> 
<div class="abc"> 
    <div> 
    <!--some more divs inside--> 
    </div> 
</div> 
</div> 

Những gì tôi muốn làm là để áp dụng phong cách duy nhất để div đầu tiên. Tôi đã cố gắng sử dụng div:not(.abc, .abc *), div:not(.abc):not(.abc *), div:not(.abc), div:not(.abc) * nhưng không có cách nào trong số này hoạt động. Rất khó để chỉnh sửa html, bởi vì sẽ có nhiều tệp được chỉnh sửa. Ngoài ra mã được hiển thị ở trên xuất hiện ở những nơi khác nhau, do đó, sử dụng bộ chọn > không phải là giải pháp ... Có ai biết cách thực hiện việc này không?

Answer 1

Bạn không thể sử dụng một cách đáng tin cậy bộ chọn :not() trong CSS để loại trừ phần tử và/hoặc phần tử con của nó. Lý do cho nó được giải thích trong this answer (và một số người khác mà nó liên kết đến):

Bạn không thể sử dụng bộ kết hợp. Điều này làm việc trong jQuery, nhưng không phải CSS:

/* 
* Grab everything that is neither #foo itself nor within #foo. 
* Notice the descendant combinator (the space) between #foo and *. 
*/ 
:not(#foo, #foo *) 

Điều này đặc biệt khó chịu, chủ yếu là vì nó không có cách giải quyết thích hợp. Có một số cách giải quyết khác (1 và 2), nhưng chúng thường phụ thuộc vào cấu trúc HTML và do đó rất hạn chế về tiện ích.

Và vì đánh dấu của bạn là không thể đoán trước đủ để bạn không thể chỉnh sửa hoặc sử dụng công cụ chọn >, tôi e rằng không có cách nào giúp bạn ngoài việc tìm cách áp dụng lớp học cho bạn đầu trang div và sử dụng lớp đó, như demonstrated by Fluidbyte và/hoặc sử dụng jQuery, như được ngụ ý ở trên.

Answer 2

Sử dụng :first-child với ID hoặc Loại phần tử mẹ của nó. Nếu bạn không thể nắm bắt phần tử bằng cách sử dụng CSS, bạn nên sử dụng Javascript hoặc jQuery.

Answer 3

Tôi thường thấy dễ dàng bao gồm những gì bạn cần thông qua một lớp học sau đó cố gắng loại trừ các phần tử con cháu. Xem fiddle ở đây: http://jsfiddle.net/cLtHg/

Điều đó đảm nhận các vấn đề về kế thừa và thân thiện hơn với nhiều trình duyệt.

Answer 4

Bạn đã thử :first-child hoặc :nth-child() selecor?

Answer 5

Nếu bạn đang thực sự không chạm vào HTML, sau đó một đơn giản mặc dù cách tiếp cận bẩn sẽ được áp dụng phong cách để div đầu tiên và sau đó loại bỏ chúng khỏi divs tiếp theo, như vậy:

div {margin-bottom: 20px; border: 1px solid #ccc;} 
div div {margin-bottom: 0; border: none;} 

Hạn chế lớn ở đây là một số phong cách trong div con có thể bị loại bỏ không mong muốn. Phụ thuộc vào cách chúng được tạo kiểu ở nơi đầu tiên.