精华内容
下载资源
问答
  • 伪类选择器

    2019-07-18 15:40:55
    伪类选择器

    超链接伪类选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /* love hate*/
            /*未访问的链接样式*/
            a:link {
                font-size: 16px;
                color: darkblue;
                font-weight: 700;
            }
    
             
            /* 已访问的链接*/ 
            a:visited {
                color: yellow;
            }
            
            /* 鼠标悬停效果*/
            a:hover {
                color: red;
            }
            
                  
            /* 按住鼠标不松手*/
            a:active {
                color: gray;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="http://www.hao123.com">抢购</a>
            <a href="http://www.ganji.com">秒杀</a>
        </div>
    </body>
    </html>
    

    结构伪类选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /*选择第一个孩子*/
             li:first-child {
                 color: blue;
             }
    
            /*选择最后一个选择器*/
             li:last-child {
                 color: green;
             }
    
            /*选择第三个孩子*/
             /*li:nth-child(3) {
                 color: yellow;
             }
             */
    
             /* n 0 1 2   li编号从1开始编号*/
             /* li:nth-child(2n-1) {
                 color: skyblue;
             } */
    
    
             /* odd奇数
             li:nth-child(odd) {
                 font-size: 20px;
             }
             */
    
             /*
                even 偶数
             li:nth-child(even) {
                 font-size: 30px;
             }
             */
             
             /* 倒数*/
             /* li:nth-last-child(even) {
                 color: red;
             } */
        </style>
    </head>
    <body>
        <ul>
            <li>aaaaa</li>
            <li>bbbbbb</li>
            <li>ccccc</li>
            <li>ddddddddd</li>
            <li>eeeeee</li>
            <li>ffffff</li>
        </ul>
    
        <ul>
            <li>aaaaa1</li>
            <li>bbbbbb1</li>
            <li>ccccc1</li>
            <li>ddddddddd1</li>
            <li>eeeeee1</li>
            <li>ffffff1</li>
        </ul>
    </body>
    </html>
    

    伪类 —— 菜鸟教程详解


    返回CSS选择器

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,437
精华内容 3,774
关键字:

伪类选择器