css3选择器child有哪些？css3选择器child用法详解

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

举例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>CSS3结构伪类选择器</title>

    <style type="text/css">

        *{padding:0;margin:0;}

        ul

        {

            display:inline-block;

            width:200px;

            border:1px solid gray;

            list-style-type:none;

        }

        ul li

        {

            height:20px;

            background-color:green;

        }

        /*设置偶数列颜色*/

        ul li:nth-child(even)

        {

            background-color:red;

        }

    </style>

</head>

<body>

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>

效果如下：

微信截图_20181119095652.png

分析：

隔行换色这种效果也很常见，例如表格隔行换色、列表隔行换色等，这些也是用户体验非常好的设计细节。

以上就是对css3选择器child有哪些？css3选择器child用法详解的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。

以上就是css3选择器child有哪些？css3选择器child用法详解的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css3选择器child有哪些？css3选择器child用法详解

更多相关阅读请进入《css3选择器child》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...