新增结构伪类选择器用法之nth:child()（36）

最新推荐文章于 2022-06-29 19:39:21 发布

㼛思雨

最新推荐文章于 2022-06-29 19:39:21 发布

阅读量156

点赞数

分类专栏： HTML5和CSS3进阶文章标签： css3

本文链接：https://blog.csdn.net/weixin_45147894/article/details/108795938

版权

HTML5和CSS3进阶专栏收录该内容

37 篇文章 2 订阅

订阅专栏

做成以上效果：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块元素练习</title>
    <style>
        .box {
            margin: 211px auto;
            text-align: center;
            color: #333;

        }

        .box a {
            display: inline-block;
            height: 36px;
            width: 36px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            background-color: #f7f7f7;
            text-decoration: none;
            color: #333;
        }

        .box .prev,
        .box .next {
            width: 72px;
        }

        input {
            width: 40px;
            height: 34px;
            outline: none;
            border: 1px solid #ccc;
        }

        button {
            width: 72px;
            height: 36px;
            line-height: 36px;
            border: 1px solid #ccc;
            background-color: #f7f7f7;
        }

        div a:nth-child(3) {
            /*div可以有也可以没有，有时候一般需要用到*/
            border: none;
            background-color: #fff;
        }

        div a:nth-child(6) {
            /*div可以有也可以没有，有时候一般需要用到*/
            border: none;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

</html>