码迷,mamicode.com
首页 > Web开发 > 详细

前端-CSS-3-伪类选择器

时间:2018-10-21 00:57:52      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:伪类   ref   n+1   col   yellow   style   href   visit   标签   

 

    /*爱恨原则 love hate*/
        /*没有被访问的a标签的样式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*访问过后的a标签的样式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠标悬停时a标签的样式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠标点住的时候a标签的样式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }
        
        /*选中第一个元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*选中最后一个元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*选中当前指定的元素  数值从1开始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示选中所有 从0开始的  0的时候表示没有选中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶数*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇数*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔几换色  隔行换色*/
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }









    </style>
</head>
<body>

    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">张三</a>
            </li>
            <li class="item2">
                2
                <a href="#">李四</a>
            </li>
            <li class="item3">
                3
                <a href="#">王八</a>
            </li>
            <li class="item4">
                4
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                5
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                6
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                7
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                8
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                9
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                10
                <a href="#">赵六</a>
            </li>
        </ul>
    </div>
    
</body>
</html>

 

前端-CSS-3-伪类选择器

标签:伪类   ref   n+1   col   yellow   style   href   visit   标签   

原文地址:https://www.cnblogs.com/foremostxl/p/9823551.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!