码迷,mamicode.com
首页 > 其他好文 > 详细

05-伪类选择器

时间:2018-05-24 16:31:26      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:class   yellow   ted   show   标签   hat   sed   S3   css3   

伪类选择器一般会用在超链接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()

 

技术分享图片
 1 /*选中第一个元素*/
 2         div ul li:first-child{
 3             font-size: 20px;
 4             color: red;
 5         }
 6         /*选中最后一个元素*/
 7         div ul li:last-child{
 8             font-size: 20px;
 9             color: yellow;
10         }
11         
12         /*选中当前指定的元素  数值从1开始*/
13         div ul li:nth-child(3){
14             font-size: 30px;
15             color: purple;
16         }
17         
18         /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
19         div ul li:nth-child(n){
20             font-size: 40px;
21             color: red;
22         }
23         
24         /*偶数*/
25         div ul li:nth-child(2n){
26             font-size: 50px;
27             color: gold;
28         }
29         /*奇数*/
30         div ul li:nth-child(2n-1){
31             font-size: 50px;
32             color: yellow;
33         }
34         /*隔几换色  隔行换色
35              隔4换色 就是5n+1,隔3换色就是4n+1
36             */
37         
38         div ul li:nth-child(5n+1){
39             font-size: 50px;
40             color: red;
41         }
View Code

 

05-伪类选择器

标签:class   yellow   ted   show   标签   hat   sed   S3   css3   

原文地址:https://www.cnblogs.com/bai-max/p/9083004.html

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