css3 選擇器：元素狀態(tài)偽類選擇器（二）

:checked
:enabled
:disabled
  • :checked
<style>
label {background-color: red; display: block;}
:checked{width: 50px;}
</style>
<body>
    <label><input type="checkbox"> 1-1 </label>
    <label><input type="checkbox"> 1-2 </label>
    <label><input type="radio" name="test"> 2-1 </label>
    <label><input type="radio" name="test"> 2-2 </label>
</body>

:checked 適配 radio 和 checkbox 中被選中的元素。

  • :enabled
<style>
label {background-color: red; display: block;}
:enabled{width: 50px;}
</style>
<body>
    <label><input type="checkbox"> 1-1 </label>
    <label><input disabled type="checkbox"> 1-2 </label>
    <label><input type="radio" name="test"> 2-1 </label>
    <label><input type="radio" name="test"> 2-2 </label>
</body>

匹配所有非 disabled 狀態(tài)下的表單元素，該選擇器與 :disabled 選擇器是對立的。

  • :disabled
<style>
label {background-color: red; display: block;}
:disabled{width: 50px;}
</style>
<body>
    <label><input type="checkbox"> 1-1 </label>
    <label><input disabled type="checkbox"> 1-2 </label>
    <label><input type="radio" name="test"> 2-1 </label>
    <label><input type="radio" name="test"> 2-2 </label>
</body>

匹配所有帶 disabled 屬性的表單元素，該選擇器與 :enabled 選擇器是對立的。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 一、屬性選擇器 Element[attr]只使用屬性名，但沒有確定任何屬性值p[cxy]{background: ...
    EndEvent閱讀 471評論 0贊 0
  • 各種純css圖標 CSS3可以實現(xiàn)很多漂亮的圖形，我收集了32種圖形，在下面列出。直接用CSS3畫出這些圖形，要比...
    劍殘閱讀 9,978評論 0贊 8
  • （1）. 陰影模糊半徑與陰影擴展半徑的區(qū)別：陰影模糊半徑：此參數(shù)可選，其值只能是為正值，如果其值為0時，表示陰影不...
    Leisure_blogs閱讀 1,649評論 0贊 6
  • 在學習weex的過程中看到了常用標簽相關的內容，為了自己以后能夠快速查閱特整理出此文檔。 a 簡介組件定義了指向某...
    TyroneTang閱讀 4,838評論 1贊 3
  • 隨著城市建設規(guī)劃的進程，古老的龍城太原煥發(fā)出現(xiàn)代化的勃勃生機。立冬之日，攝影師登上即將開業(yè)的華宇百花谷大廈頂層，俯...
    北冥魚_983f閱讀 928評論 4贊 6

友情鏈接更多精彩內容