không: bộ chọn con đầu

Tôi có một divthẻ chứa một số ulthẻ.

Tôi chỉ có thể đặt thuộc tính CSS cho ulthẻ đầu tiên :

div ul:first-child {
    background-color: #900;
}

Tuy nhiên, những nỗ lực sau đây của tôi để đặt các thuộc tính CSS cho mỗi ulthẻ khác ngoại trừ thẻ đầu tiên không hoạt động:

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

Làm cách nào tôi có thể viết bằng CSS: "mỗi phần tử, ngoại trừ phần tử đầu tiên"?

Một trong những phiên bản bạn đăng thực sự hoạt động cho tất cả các trình duyệt hiện đại (nơi selectors CSS cấp 3 được hỗ trợ ):

div ul:not(:first-child) {
    background-color: #900;
}

Nếu bạn cần hỗ trợ các trình duyệt cũ hoặc nếu bạn bị cản trở bởi giới hạn:not của bộ chọn (nó chỉ chấp nhận một bộ chọn đơn giản làm đối số) thì bạn có thể sử dụng một kỹ thuật khác:

Xác định một quy tắc có phạm vi lớn hơn những gì bạn dự định và sau đó "thu hồi" nó một cách có điều kiện, giới hạn phạm vi của nó với những gì bạn dự định:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

Khi giới hạn phạm vi, hãy sử dụng giá trị mặc định cho từng thuộc tính CSS mà bạn đang đặt.

Giải pháp CSS2 này ("bất kỳ cái nào ulkhác ul") cũng hoạt động và được nhiều trình duyệt hỗ trợ hơn.

div ul + ul {
  background-color: #900;
}

Không giống như :notvà :nth-sibling, bộ chọn anh chị em liền kề được IE7 + hỗ trợ.

Nếu bạn có JavaScript thay đổi các thuộc tính này sau khi tải trang, bạn nên xem xét một số lỗi đã biết trong triển khai IE7 và IE8 của việc này. Xem liên kết này .

Đối với bất kỳ trang web tĩnh, điều này sẽ hoạt động hoàn hảo.

Vì :notkhông được IE6-8 chấp nhận , tôi sẽ đề nghị bạn điều này:

div ul:nth-child(n+2) {
    background-color: #900;
}

Vì vậy, bạn chọn mọi ultrong phần tử cha của nó ngoại trừ phần tử đầu tiên .

Tham khảo bài viết "Hữu ích: Bí quyết thứ n" của Chris Coyer để biết thêm nth-child ví dụ .

div li~li {
    color: red;
}

Hỗ trợ IE7

not(:first-child)dường như không hoạt động nữa. Ít nhất là với các phiên bản gần đây hơn của Chrome và Firefox.

Thay vào đó, hãy thử điều này:

ul:not(:first-of-type) {}

Bạn có thể sử dụng bất kỳ bộ chọn nào với not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

Tôi đã không gặp may mắn với một số điều trên,

Đây là người duy nhất thực sự làm việc cho tôi

ul:not(:first-of-type) {}

Điều này làm việc cho tôi khi tôi đang cố gắng để nút đầu tiên được hiển thị trên trang không bị ảnh hưởng bởi tùy chọn lề trái.

đây là tùy chọn tôi đã thử đầu tiên nhưng nó không hoạt động

ul:not(:first-child)

Bạn có thể sử dụng bộ chọn của mình :notgiống như dưới đây, bạn có thể sử dụng bất kỳ bộ chọn nào bên trong:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

bạn có thể sử dụng :notmà không cần chọn cha mẹ là tốt.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Thêm ví dụ

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

Như tôi đã sử dụng ul:not(:first-child)là một giải pháp hoàn hảo.

div ul:not(:first-child) {
    background-color: #900;
}

Tại sao điều này là hoàn hảo bởi vì bằng cách sử dụng ul:not(:first-child), chúng ta có thể áp dụng CSS trên các yếu tố bên trong. Giốngli, img, span, a thẻ vv

Nhưng khi sử dụng các giải pháp khác:

div ul + ul {
  background-color: #900;
}

và

div li~li {
    color: red;
}

và

ul:not(:first-of-type) {}

và

div ul:nth-child(n+2) {
    background-color: #900;
}

Những điều này chỉ hạn chế CSS cấp độ ul. Giả sử chúng ta không thể áp dụng CSS trên lidưới dạng 'div ul + ul li'.

Đối với các yếu tố cấp độ bên trong, Giải pháp đầu tiên hoạt động hoàn hảo.

div ul:not(:first-child) li{
        background-color: #900;
    }

và như thế ...