05-伪类选择器

Posted orangehero

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了05-伪类选择器相关的知识,希望对你有一定的参考价值。

【转】05-伪类选择器

伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则"  LoVe HAte

技术图片
 1               /*没有被访问的a标签的样式*/
 2         .box ul li.item1 a:link{
 3             
 4             color: #666;
 5         }
 6         /*访问过后的a标签的样式*/
 7         .box ul li.item2 a:visited{
 8             
 9             color: yellow;
10         }
11         /*鼠标悬停时a标签的样式*/
12         .box ul li.item3 a:hover{
13             
14             color: green;
15         }
16         /*鼠标摁住的时候a标签的样式*/
17         .box ul li.item4 a:active{
18             
19             color: yellowgreen;
20         }
View Code

 

再给大家介绍一种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;
        }
            
View Code

 



以上是关于05-伪类选择器的主要内容,如果未能解决你的问题,请参考以下文章

05-伪类选择器

05-伪类选择器

05-伪类选择器

05-伪类选择器

CSS 伪类选择器:first - 它是啥?我在示例代码中找到并且找不到关于它的文档

CSS伪类--锚伪类选择器(动态伪类选择器)-使用详细总结