css nth-of-type All In One

css nth-of-type All In One

nth-of-type

nth-of-type(even) & nth-of-type(2n)

n 从 1 开始 ??? n can be a number, a keyword, or a formula.

    .creative-box-container {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: flex-start;
        width: calc(150px * 2 + 20px);
        max-height: 170px;
        overflow-y: auto;
        .creative-box {
            box-sizing: border-box;
            width: 150px;
            height: 80px;
            background: #f8f8f8;
            border-radius: 4px;
            border: 1px dashed #ddd;
            margin-right: 5px;
            margin-bottom: 5px;
            overflow: hidden;
            &:nth-of-type(even) {
                margin-right: 0;
            }
            // &:nth-of-type(2n) {
            //     margin-right: 0;
            // }
        }
    }

:nth-of-type bigger 3

    .multi-flex-box-6 {
        flex-flow: row wrap;
        height: 440px;
        .flex-item {
            /* not work at all ❌*/
            &:nth-of-type(4 + n) {
                .image-box {
                    border-top: 0;
                    color: red !important;
                }
            }
        }
    }

    .multi-flex-box-6 {
        flex-flow: row wrap;
        height: 440px;
        .flex-item {
           /* works well ✅*/
          &:nth-of-type(4),
          &:nth-of-type(5),
          &:nth-of-type(6) {
                .image-box {
                    border-top: 0;
                    color: red !important;
                }
            }
        }
    }

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---