0 0 3 1 - 用伪类选择器让列表'嗑粉儿'

不二如是 · 发表于 2017-1-25 11:01:21

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:22 编辑

在30我们搞定了一个喜庆版列表。

挺好的，像邻家姑娘的纯洁～

但是！

作为一个成年人！

我有义务让她狂躁起来，释放她内心的野兽之力～

估计你扛不住！

哈哈，不要意淫啦骚年。

在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;
}

复制代码

效果图：

游客，如果您要查看本帖隐藏内容请回复

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

shishunfu · 发表于 2017-4-26 09:50:23

越来越有意思了！交作业

<!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>

复制代码

庚午 · 发表于 2018-1-9 21:51:26

<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>

复制代码

type_J · 发表于 2017-1-27 01:25:21

做到这么晚的

不二如是 · 发表于 2017-1-27 06:55:52

type_J 发表于 2017-1-27 01:25
做到这么晚的

哈哈，好厉害！！！

请收下这点鱼币～

Sahil · 发表于 2017-1-27 16:00:34

看看是哪三个

不二如是 · 发表于 2017-1-28 10:17:23

Sahil 发表于 2017-1-27 16:00
看看是哪三个

欢迎～

wuxiandashu · 发表于 2017-2-10 11:46:35

都是斯蒂芬森

不二如是 · 发表于 2017-2-10 12:41:47

wuxiandashu 发表于 2017-2-10 11:46
都是斯蒂芬森

qywang · 发表于 2017-2-28 09:37:55

学习一波

772317495 · 发表于 2017-2-28 17:13:33

看帖要养成回复的好习惯

a540656809 · 发表于 2017-3-1 08:04:04

看看

不二如是 · 发表于 2017-3-1 08:39:07

a540656809 发表于 2017-3-1 08:04
看看

欢迎～

a540656809 · 发表于 2017-3-1 08:40:43

不二如是发表于 2017-3-1 08:39
欢迎～

小哥起的真早啊

不二如是 · 发表于 2017-3-1 08:44:59

a540656809 发表于 2017-3-1 08:40
小哥起的真早啊

163areocraft · 发表于 2017-3-7 16:46:06

谢谢。

SonOmiga · 发表于 2017-3-7 19:52:08

dreamdnj · 发表于 2017-3-10 08:34:53

看看

疯样的篮子 · 发表于 2017-3-17 21:30:44

从来都是被第二页进度赶着走.....~~~~~

joker11111 · 发表于 2017-3-26 23:52:37

交作业

落了两周

内心自责无比，蓝瘦，香菇

不二如是 · 发表于 2017-3-27 10:35:24

joker11111 发表于 2017-3-26 23:52
交作业落了两周内心自责无比，蓝瘦，香菇

joker，棒棒哒～

wei_Y · 发表于 2017-3-29 19:08:48

发现个有趣的地方，当li里的内容是汉字时，浏览器缩小时当前的字如果不能继续待在这一行里那么就会换行。

当是英文时，如果这个英文是一个整体时，比如HTML5678，则不会换行。

英文会以空格为单位进行换行。汉字以单个字为单位换行。

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 3 1 - 用伪类选择器让列表'嗑粉儿'

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

评分

评分

评分

点评

浏览过的版块