标签: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 }
再给大家介绍一种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 }
标签:class yellow ted show 标签 hat sed S3 css3
原文地址:https://www.cnblogs.com/bai-max/p/9083004.html