0 0 3 1 - 用伪类选择器让列表'嗑粉儿'
本帖最后由 不二如是 于 2021-8-11 09:22 编辑在30我们搞定了一个喜庆版列表。
挺好的，像邻家姑娘的纯洁～
但是！
作为一个成年人！
我有义务让她狂躁起来，释放她内心的野兽之力～
估计你扛不住！{:10_336:}
哈哈，不要意淫啦骚年。
在30中我们是批量设置列表项的图片，你要想单独设置怎么办呢？
还记得在23中，我挖坑只介绍了几种最简单的选择器。
那写看着复杂点的留到后面用到，再说。
好吧，解开谜题，就在今天！
这次我们使用C3中的伪类选择器
伪类选择器，就是让你可以单独设计列表项，不要被他的名字唬住～
就是下面这三个小东西：
:first-child，代表第一个元素；
:nth-child,代表中间元素；
:last-child，代表最后一个元素；
我们为，列表1，3项添加神兽，小小甲鱼，原始代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
li{
padding: 15px;
margin: 5px 0;
text-indent: 40px;
/*color: #FFF;*/
}
</style>
</head>
<body>
<ul>
<li>小天才养殖场</li>
<li>吹水阁</li>
<li>Web开发</li>
<li>Qt开发</li>
</ul>
</body>
</html>
效果图：
凑4个列表项，好演示，添加伪类选择器：
li:first-child{
background:#C0392B url(check.png) no-repeat 10px 50%;
}
li:nth-child(2){
background: #E74C3C url(shenshou.png) no-repeat 10px 50%;
}
li:nth-child(3){
background: #C0392B url(check.png) no-repeat 10px 50%;
}
li:last-child{
background: #E74C3C url(shenshou.png) no-repeat 10px 50%;
}
效果图：
看到了不，不同项的child有不同的用法！
除了首，first-child；尾，last-child。
中间项一律，nth-child(n)。
当然了还可以有更好玩的用法，中间项既然是n，那么就可以输入函数！
nth-child(n+3)，获取除前三个之外的所有元素。
nth-child（-n+3），获取前三个元素。
nth-child(2n)，获取所有偶数项。
留给你自己玩儿吧～
还可以添加点互动，当鼠标滑过某项时，可以添加背景色，既然过年，就用绿色#99FF33（颜色大全）
li:hover{
background-color: #99FF33;
}
效果图：
**** Hidden Message *****
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 越来越有意思了！交作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
li{
list-style: none;
padding: 15px;
text-indent: 35px;
float: left;
margin-right: 3%;
width: 20%;
min-width: 99px; /*min-width 属性设置元素的最小宽度。*/
}
a{
text-decoration: none;
color: red;
}
li:first-child{
background:beige url("http://xxx.fishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png")no-repeat 10px 50%;
}
li:nth-child(2){
background:beige url("http://xxx.fishc.com/forum/201701/25/095359s33kjk8ihr0r5dk5.png")no-repeat 10px 50%;
}
li:nth-child(3){
background:beige url("http://xxx.fishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png")no-repeat 10px 50%;
}
li:last-child{
background:beige url("http://xxx.fishc.com/forum/201701/25/095359s33kjk8ihr0r5dk5.png")no-repeat 10px 50%;
margin-right: 0;
}
li:hover{
background-color: #99FF33;
}
</style>
</head>
<body>
<ul>
<li><a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场</a></li>
<li><a href="http://bbs.fishc.com/forum-33-1.html">吹水阁</a></li>
<li><a href="http://bbs.fishc.com/forum.php?mod=forumdisplay&fid=171&filter=typeid&typeid=637">Web开发</a></li>
<li><a href="http://bbs.fishc.com/forum-310-1.html">Qt开发</a></li>
</ul>
</body>
</html> <doctype html>
<html>
<meta charset='utf-8'>
<head>
<title>li-hover</title>
<style type='text/css'>
ul{padding:0;margin:0;}
li{height:30;
width:200px;
text-indent:60px;
margin:7px 0;
color:#FFFFFF;
list-style:none;}
li:first-child{background:#C0392B url(check.png) no-repeat 10px 60%;}
li:nth-child(2){background:#E74C3C url(shenshou.png) no-repeat 10px 80%;}
li:nth-child(3){background:#C0392B url(check.png) no-repeat 10px 80%;}
li:last-child{background:#E74C3C url(shenshou.png) no-repeat 10px 40%;}
li:hover{background-color:#99FF33}
</style>
</head>
<body>
<ul>
<li>QT开发</li>
<li>WEB网页开发</li>
<li>吹水阁</li>
<li>小天才养殖场</li>
</ul>
</body>
</html> 做到这么晚的{:10_291:}{:10_291:} type_J 发表于 2017-1-27 01:25
做到这么晚的
哈哈，好厉害！！！
请收下这点鱼币～ 看看是哪三个{:5_91:} Sahil 发表于 2017-1-27 16:00
看看是哪三个
欢迎～ 都是斯蒂芬森 wuxiandashu 发表于 2017-2-10 11:46
都是斯蒂芬森
{:10_266:} 学习一波 看帖要养成回复的好习惯 看看 a540656809 发表于 2017-3-1 08:04
看看
欢迎～ 不二如是 发表于 2017-3-1 08:39
欢迎～
小哥起的真早啊 a540656809 发表于 2017-3-1 08:40
小哥起的真早啊
{:5_92:} 谢谢。 {:5_102:} 看看 从来都是被第二页进度赶着走.....~~~~~ 交作业{:10_278:} 落了两周{:10_262:} 内心自责无比，蓝瘦，香菇{:10_250:}
joker11111 发表于 2017-3-26 23:52
交作业 落了两周 内心自责无比，蓝瘦，香菇
joker，棒棒哒～ 发现个有趣的地方，当li里的内容是汉字时，浏览器缩小时 当前的字如果不能继续待在这一行里那么就会换行。
当是英文时，如果这个英文是一个整体时，比如HTML5678，则不会换行。
英文会以空格为单位进行换行。汉字以单个字为单位换行。