如何將僞元素與僞類組合？

如何將:after等僞元素與:hover和: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>

如何我可以排除，例如，在列表中的第一項和第三項從這個懸停效果？

來源

2016-09-14 kero

只是照常結合... – Oriol

您可以鏈接:not()僞類與:nth-child()這樣的選擇器。

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>

來源

2016-09-14 20:03:23

大約有結合僞類和僞元素，除了一個規則說there can only be one pseudo-element per complex selector and it must appear at the very end並沒有硬性規定。僞類可以按任意順序寫入 - 簡單選擇器的順序不會改變複合選擇器的含義。請注意，與僞類不同，僞元素不是一個簡單的選擇器。

你可以寫任何的

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

或

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

或

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

，或者心裏很不舒服，甚至

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

，你會得到相同的結果（假設瀏覽器不是越野車），只要:after，僞元素，最後出現（和li，類型選擇器，首先出現）。

按照慣例，大多數作者選擇在動態僞類之前放置結構僞類，如:nth-child()，如:hover。但這完全是個人偏好;這對瀏覽器無關緊要。

來源

2016-09-15 06:09:05 BoltClock

如何將僞元素與僞類組合？

回答

相關問題