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 - 用伪类选择器让列表'嗑粉儿'

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

评分

本帖被以下淘专辑推荐:

点评

评分

点评

评分

评分

点评