HTML5教程

【HTML/CSS】伪类选择器

本文主要是介绍【HTML/CSS】伪类选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这个也有意思
之前几天学的，现在写写刚好复习（

伪类选择器

伪类是什么？
伪类用于定义元素的特殊状态，比如鼠标悬浮在按钮上，按钮颜色会变就是一个例子。

链接伪类选择器

修改链接状态的选择器

点击查看-连接选择器-代码 
<!DOCTYPE html>
<html>
    <head>
        <title>
            伪类选择器
        </title>
        <style>
            /*
                链接伪类选择器,可以修改状态
                有顺序
                L V H A
            */
            a:link{
                font-weight: bold;
                font-size: 20px;
                color: gray;
            }
            a:visited{
                font-weight: bold;
                font-size: 20px;
                color: blueviolet;
            }
            a:hover{
                font-weight: bold;
                font-size: 50px;
                color: red;
            }
            a:active{
                font-weight: bold;
                font-size: 20px;
                color: orange;
            }
        </style>
    </head>  
    <body>
        <a href="https://www.baid.com">BAIDU</a>
    </body>
</html>

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

伪类名称对大小写不敏感。

目标伪类选择器

点击目录里一个链接就跳到相应内容的效果就靠它

点击查看-目标伪类选择器-代码 
<!DOCTYPE html>
<html>
    <head>
        <title>
            目标伪类选择器
        </title>
        <style>
            :target{
                color: firebrick;
            }
        </style>
    </head>
    <body>
        <h2>menu</h2>
        <a href="#story">lubenwei</a>
        <a href="#NB">nb</a>
        <br>
        <pre>
            awerawe
            qwer
            qw
            er
            qwerqw
            er
            qwerr
            qwerqw
            er
            qwe

            f
            gs
            dfg
            sdf
            Gsg

            dghj
            awerawefe
            rf
            er
            fsre
            fw
            g
            wer
            Gewrg
            werg
            er
            Gewrggw
            erg
            werrg

            werrgh
            yt
            tuy
            j
            yu
            j
            yu
            j
            tuyjty
            uj
            tuyju


            dtyhrty
            <hgroup>rty
                jh
                rty
                jrt
                yj
                rtyj
                rtyjrt
                yjtyrj
                yjtrty
                jhrty
                jhrty
                jhrtyj
                rtyj

            </hgroup>
            rtyjjr
            tuyjty
            rtyjrty
            jhrtyrtyj
            rt
            yjtrtyrty
            jhrtyrtyj
            rtyjtry
            jhrtyrtyjj

            tiyu
            <kbd>yuik
                uyi
                l
                yluo
                <li>yuiklyu

                    yu
                </li>
            </kbd>
        </pre>
        <h2 id="story">story</h2>
        <pre>
            LBWNB
            LBWNB
            LBWNB
            LBWNBLBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
            LBWNB
        </pre>
        <h2 id="NB">nb</h2>
        <pre>nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb

        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
        nbnbnbnbnb
    </pre> 
    </body>
</html>

建议保存代码然后用浏览器打开查看效果

结构伪类选择器

选择选取属于其父元素的某个子元素的选择器

点击查看代码 
<!DOCTYPE html>
<html>
    <head>
        <title>
            结构伪类选择器
        </title>
        <style>
            /*
                first-child 选取属于其父元素的首个子元素的选择器
                last-child 选取属于其父元素的最后一子元素的选择器
                nth-child 选取属于其父元素的第n个子元素的选择器
                last-nth-child 选取属于其父元素的倒数第n个子元素的选择器
            */
            li{
                font:bold 40px "微软雅黑";
            }
            
            li:nth-child(odd){
                color: darkgrey;
            }
            li:nth-child(even){
                color: darkslategray;
            }
            li:first-child{
                color: brown;
            }
            li:last-child{
                color: cornflowerblue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
        </ul>
    </body>
</html>

目前学到这里，有学新的了再更

这篇关于【HTML/CSS】伪类选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航