伪类选择器

最新推荐文章于 2024-09-10 18:52:07 发布

端脑

最新推荐文章于 2024-09-10 18:52:07 发布

阅读量519

点赞数 3

分类专栏：前端文章标签：伪类选择器

本文链接：https://blog.csdn.net/qq_43776742/article/details/96432631

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

超链接伪类选择器

<!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>