zoukankan      html  css  js  c++  java
  • 05------伪类选择器

    伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则"  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;
            }

    再介绍一种css3的选择器nth-child()

    /*选中第一个元素*/
            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表示选中所有,这里面必须是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;
            }
            /*隔几换色  隔行换色
                 隔4换色 就是5n+1,隔3换色就是4n+1
                */
            
            div ul li:nth-child(5n+1){
                font-size: 50px;
                color: red;
            }
  • 相关阅读:
    泛海精灵软件预发布统计报告 & 反馈
    【scrum】2.23
    VS2010中C#添加图片(资源)
    用XML存储程序的配置
    scrum 2.28
    【Scrum】2.24
    《人月神话》读书心得
    微软R&D喜欢什么人才
    “电脑族”应多做下肢运动
    ASCII表
  • 原文地址:https://www.cnblogs.com/edeny/p/9230458.html
Copyright © 2011-2022 走看看