CSS樣式中,:hover
用來指定鼠標懸停在元素上的樣式,:active
用來指定元素被激活時的樣式,而:focus
用來指定元素獲得焦點時的樣式。這三個偽類都跟鼠標和鍵盤操作有關,而:checked
偽類則與表單元素的選中狀態有關,也就是說該偽類只對可以被選中的元素生效。
在表單元素中,<input type="checkbox">
和<input type="radio">
元素是可以被選中的。當這些元素被選中時,:checked
偽類會為它們添加指定的樣式。如果要指定樣式,可以使用下面的CSS:
input[type="checkbox"]:checked, input[type="radio"]:checked { /* 添加樣式 */ }
在表格元素中,<tr>
元素也可以被選中。當表格中的一個<tr>
元素被選中時,可以為它添加指定的樣式。這樣可以為表格行添加更多的交互效果,以增強用戶體驗。
tr:hover, tr:active, tr:focus, tr:checked { /* 添加樣式 */ }
需要注意的是,:checked
偽類只能應用于<input type="checkbox">
和<input type="radio">
元素。如果想要使用:checked
偽類選中其它元素,需要使用JavaScript來實現。