CSS :nth-of-type() bug

.tools-hover-box-list-item {

    pointer-events: auto;

    box-sizing: border-box;

    display: flex;

    flex-flow: row nowrap;

    justify-content: flex-start;

    align-items: flex-start;

    width: 140px;

    margin-top: 14px;

    &:nth-of-type(4n + 1) {

        margin-top: 20px;

    }

    // &:nth-of-type(1 + 4n) {

    //     margin-top: 20px;

    // }

    // &:hover {

    //     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);

    // }

}

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

demo

See the Pen css nth-of-type bug by xgqfrms
(@xgqfrms) on CodePen.

css n-type-of not working

refs

xgqfrms 2012-2020

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

CSS :nth-of-type() bug的更多相关文章

  1. vue bug & data type bug

    vue bug & data type bug [Vue warn]: Invalid prop: type check failed for prop "value". ...

  2. CSS中常见的BUG调试

    1.布局--layout 布局是windows提出的概念,用于控制元素的尺寸和定位. 拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制. 通常在IE6中出 ...

  3. CSS的兼容性与BUG处理

    骨灰级清除浮动 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility ...

  4. CSS修改input[type=range]滑块样式

    input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...

  5. CSS美化 input type=file 兼容各个浏览器（转）

    HTML代码: <FORM> <A class=btn_addPic href="javascript:void(0);"><SPAN>< ...

  6. css重点知识和bug解决方法

    1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...

  7. css 重点知识 和 bug 解决方法

    1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...

  8. CSS的一个小bug，Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.

    在vue重新渲染页面的时候,报了一个错误: 翻译了报错信息后,Gradient has outdated direction syntax. New syntax is like to left in ...

  9. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  10. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

随机推荐

  1. synchronized的jvm源码分析聊锁的意义

    上篇写完了ReentrantLock源码实现,从我们的角度分析设计锁,在对比大神的实现,顺道拍了一波道哥的马屁,虽然他看不到,哈哈.这一篇我们来聊一聊synchronized的源码实现,并对比reen ...

  2. js input相关事件（转载）

    1.onfocus  当input 获取到焦点时触发. 2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空.3.o ...

  3. 【转载】Linux中找不到ifconfig命令的解决方法

    ifconfig命令出错 ifconfig命令是设置或显示网络接口的程序,可以显示出我们机器的网卡信息,可是有些时候最小化安装CentOS等Linux发行版的时候会默认不安装ifconfig等命令,这 ...

  4. 服务降级 托底预案 Nginx中使用Lua脚本检测CPU使用率，当达到阀值时开启限流，让用户排队

    https://mp.weixin.qq.com/s/FZAcQQAKomGEe95kln1HCQ 在京东我们是如何做服务降级的 https://mp.weixin.qq.com/s/FZAcQQAK ...

  5. 分别简述computed和watch的使用场景

    computed: 当一个属性受多个属性影响的时候就需要用到computed 最典型的栗子: 购物车商品结算的时候watch: 当一条数据影响多条数据的时候就需要用watch 栗子:搜索数据

  6. C语言--指针数组大小

    #include <stdio.h> #include <string.h> int main(void) { char *str[3]={ "Hello,thisi ...

  7. 封装各种生成唯一性ID算法的工具类

    /** * Copyright (c) 2005-2012 springside.org.cn * * Licensed under the Apache License, Version 2.0 ( ...

  8. 翻译：《实用的Python编程》00_Setup

    课程设置与概述 欢迎访问本课程(Practical Python Programming).这个页面包含一些关于课程设置的重要信息. 课程周期和时间要求 该课程最初是作为一个由讲师主导的,持续 3 - ...

  9. 配置VS2013 + opencv 2.4.10

    其实我内心是极力反对装这么老的版本的,但是要交课堂作业~~好无奈 [注] : 如果按照本文配置不成功,可以试一下其他博客里面的配置(多试一试总能成功的) https://jingyan.baidu.c ...

  10. Bézout恒等式

    写在前面: 记录了个人的学习过程,同时方便复习 整理自网络 非原创部分会标明出处 目录 结论 证明 拓展 n个整数间 拓展欧几里得算法 拓展欧几里得算法的多解 结论 (Bézout / 裴蜀 / 贝祖 ...