order排序

最新推荐文章于 2023-06-11 14:55:35 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-06-11 14:55:35 发布

阅读量2.4k

点赞数 1

分类专栏： css系列（精通精通）

本文链接：https://blog.csdn.net/qq_37805832/article/details/108644344

版权

css系列（精通精通）专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
        }
        ul>li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            background: red;
        }
        ul>li:nth-child(1){
            /*
            默认情况下每一个伸缩项都有一个order属性, 用于决定排序的先后顺序
            默认情况下所有伸缩项的order属性的取值都是0
            我们可以通过修改order属性的取值来实现伸缩项的排序
            order排序的规则: 从小到大的排序, 越小的显示在越前面, 越大的显示在越后面
            */
          order: 999;
        }
         ul>li:nth-child(2){
            background: green;
            order: 0;
        }
        ul>li:nth-child(3){
            background: blue;
            order: -1;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

贵哥的编程之路(热爱分享)

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
order排序

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; width: 600px;
复制链接

扫一扫