常用偽類、偽元素選擇器

本文轉載自查看原文 2019-07-15 22:26 4080 HTML+CSS小技巧

偽類選擇器

:link 未訪問

:visited 　　　　已訪問

:hover 鼠標懸停

:active 鼠標按下

:not(s) 匹配不含s選擇器的元素

:frist-child 父元素的第一個元素

:last-child 父元素的最后一個元素

:only-child 父元素的唯一一個元素

:checked 選中 :checked+偽元素

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>:checked+偽元素</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
input:checked + span {
    background: #f00;
}
input:checked + span:after {
    content: " 我被選中了";
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
    <legend>選中下面的項試試</legend>
    <ul>
        <li><label><input type="radio" name="colour-group" value="0" /><span>藍色</span></label></li>
        <li><label><input type="radio" name="colour-group" value="1" /><span>紅色</span></label></li>
        <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
    </ul>
</fieldset>
<fieldset>
    <legend>選中下面的項試試</legend>
    <ul>
        <li><label><input type="checkbox" name="colour-group2" value="0" /><span>藍色</span></label></li>
        <li><label><input type="checkbox" name="colour-group2" value="1" /><span>紅色</span></label></li>
        <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
    </ul>
</fieldset>
</form>
</body>
</html>

:checked+偽元素

偽元素選擇器(content屬性)

::before

::after

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 偽類選擇器與偽元素選擇器 css選擇器，偽類和偽元素的區別偽元素、偽類和選擇器之間的區別 a標簽偽類選擇器以及偽元素:hover的案例 html偽類與偽元素選擇器演示-JQuery中偽元素和偽類選擇器 CSS選擇器之偽類選擇器（元素）偽類（偽類選擇器）偽元素選擇器如何使用CSS3中的結構偽類選擇器和偽元素選擇器