本文主要是介绍css(五)- 伪类选择器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style type="text/css">/*没有被访问过的a标签的样式 */.box ul li.item1 a:link {color: yellow;}/*访问过后的a标签的样式*/.box ul li.item2 a:visited {color: fuchsia;}/*鼠标悬停时的a标签的样式*/.box ul li.item3 a:hover {color: green;}/*鼠标点住的时候a标签的样式*/.box ul li.item4 a:active {color: darkmagenta;}/*选中第一个元素*/div ul li:first-child {font-size: 30px;color: red;}/*选中最后一个元素*/div ul li:last-child {font-size: 40px;color: yellow;}/*选中当前指定的元素 数值从1开始 0代表没有选中*/div ul li:nth-child(3) {color: darkorange;font-size: 20px;}/*n表示选中所有 从0开始*/div ul li:nth-child(n) {color: darkorange;font-size: 20px;}/*偶数*/div ul li:nth-child(2n) {color: aquamarine;font-size: 50px;}/*奇数*/div ul li:nth-child(2n-1) {color: aqua;font-size: 80px;}/*隔n行换色 隔3就是4n+1*/div ul li:nth-child(4n+1) {color: darkorange;font-size: 10px;}</style>
</head>
<body><div class="box"><ul><li class="item1">1<a href="#">坑</a></li><li class="item2">2<a href="#">蒙</a></li><li class="item3">3<a href="#">拐</a></li><li class="item4">4<a href="#">骗</a></li><li class="item4">5<a href="#">骗</a></li><li class="item4">6<a href="#">骗</a></li><li class="item4">7<a href="#">骗</a></li><li class="item4">8<a href="#">骗</a></li><li class="item4">9<a href="#">骗</a></li></ul></div>
</body>
</html>
这篇关于css(五)- 伪类选择器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!