Sự khác biệt giữa div ~ div và div: not (: first-of-type)?

Question

Có sự khác biệt nào giữa div~div và div:not(:first-of-type) không? Ngoài IE6 bất cứ lỗi nào, có trường hợp nào họ sẽ làm những việc khác nhau không?

Answer 1

Về yếu tố phù hợp, không có sự khác biệt. Bất kỳ số div nào theo sau một số khác div trong cùng một bậc cha mẹ, theo sự cần thiết, không phải là phần tử đầu tiên thuộc loại div trong phạm vi gốc của nó.

Nếu chọn anh chị em đã + và không ~, sau đó div+div có điều kiện nói thêm rằng các yếu tố sau đây phải xuất hiện ngay sau khi các yếu tố trước. Đây không phải là trường hợp với ~ - bất kỳ số lượng anh chị em nào của bất kỳ loại nào khác có thể xuất hiện giữa hai người.

Nếu pseudo-class là :first-child và không :first-of-type, sau đó div:not(:first-child) sẽ vẫn phù hợp div:first-of-type nếu div đầu tiên trong vòng mẹ của nó không phải là đứa con đầu lòng của mình.

Dưới đây là một ví dụ:

<section> 
    <div></div> <!-- div:first-child or div:first-of-type --> 
    <div></div> <!-- div+div or div~div or div:nth-of-type(2) --> 
    <p></p> 
    <div></div> <!-- div+p+div or div~div or div:nth-of-type(3), 
        but not div+div --> 
</section> 
<section> 
    <h1></h1> <!-- h1:first-child --> 
    <div></div> <!-- div:first-of-type or div:nth-child(2) --> 
    <div></div> <!-- div~div or div:nth-of-type(2) or div:nth-child(3) --> 
</section> 

Về specificity, có một sự khác biệt. Nếu bạn có các quy tắc CSS với cả hai bộ chọn phù hợp với các phần tử giống nhau, thì div:not(:first-of-type) sẽ được ưu tiên do lớp học giả :first-of-type. Lưu ý rằng chính bản thân số :not() không được tính - chỉ có đối số của nó được xem xét.

Dưới đây là một minh họa:

div { 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid red; 
 
} 
 

 
/* 1 pseudo-class, 1 type -> specificity = 0-1-1 */ 
 
div:not(:first-of-type) { 
 
    border-color: green; 
 
} 
 

 
/* 2 types    -> specificity = 0-0-2 */ 
 
div ~ div { 
 
    border-color: blue; 
 
}

<section> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</section>