Làm cách nào để kết hợp các phần tử giả với các lớp giả?

Question

Làm cách nào để kết hợp các phần tử giả như :after với các lớp giả như :hover và :not?

li { 
 
    margin-bottom: 10px; 
 
} 
 
li:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 3px; 
 
    background: #009688; 
 
    transition: width .8s; 
 
} 
 
li:hover:after { 
 
    width: 100%; 
 
}

<ul> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third</li> 
 
    <li>forth</li> 
 
    <li>fifth</li> 
 
</ul>

Làm thế nào tôi có thể loại trừ, ví dụ, mục đầu tiên và thứ ba trong danh sách từ hiệu ứng di chuột này?

Answer 1

Bạn có thể chuỗi :not() giả lớp với :nth-child() bộ chọn như thế này.

li { 
 
    margin-bottom: 10px; 
 
} 
 
li:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 3px; 
 
    background: #009688; 
 
    transition: width .8s; 
 
} 
 
li:not(:nth-child(1)):not(:nth-child(3)):hover:after { 
 
    width: 100%; 
 
}

<ul> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third</li> 
 
    <li>forth</li> 
 
    <li>fifth</li> 
 
</ul>

Answer 2

Không có quy tắc đặc biệt xung quanh kết hợp pseudo-class và pseudo-yếu tố, bên cạnh một quy tắc mà nói there can only be one pseudo-element per complex selector and it must appear at the very end. Các lớp giả có thể được viết theo thứ tự bất kỳ - thứ tự các bộ chọn đơn giản không thay đổi ý nghĩa của bộ chọn hợp chất. Lưu ý rằng một phần tử giả, không giống như một lớp giả, không phải là một bộ chọn đơn giản.

Bạn có thể viết bất kỳ

li:not(:nth-child(1)):not(:nth-child(3)):hover:after 

hoặc

li:hover:not(:nth-child(1)):not(:nth-child(3)):after 

hoặc

li:hover:not(:nth-child(3)):not(:nth-child(1)):after 

hoặc, quái, thậm chí

li:not(:nth-child(3)):hover:not(:nth-child(1)):after 

và bạn sẽ nhận được kết quả tương tự (giả sử trình duyệt không lỗi), miễn là :after, phần tử giả, xuất hiện cuối cùng (và li, bộ chọn loại, xuất hiện trước tiên).

Theo quy ước, hầu hết các tác giả chọn đặt các lớp giả cấu trúc, chẳng hạn như :nth-child(), trước các lớp giả động, chẳng hạn như :hover. Nhưng điều này hoàn toàn là sở thích cá nhân; nó không quan trọng đối với trình duyệt.