05-伪类选择器

Posted 大白1#

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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()

 

技术分享图片
 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-伪类选择器的主要内容,如果未能解决你的问题,请参考以下文章

05-伪类选择器

05-伪类选择器

05-伪类选择器

05-伪类选择器

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

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