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. int ping = 11; 限流 客户端验证与服务端是连接的

    int ping = 11; ZooKeeper Programmer's Guide https://zookeeper.apache.org/doc/r3.1.2/zookeeperProgram ...

  2. OIer 生涯绊脚石

    字符串 哈希进制搞质数 \({\color{OrangeRed}{KMP}}\) 数组别开太大,否则 \({\color{Gold}{TLE}}\) 没有必要 \({\color{Cyan}{strl ...

  3. Redis 实战 —— 12. 降低内存占用

    简介 降低 Redis 的内存占用有助于减少创建快照和加载快照所需的时间.提升载入 AOF 文件和重写 AOF 文件时的效率.缩短从服务器进行同步所需的时间(快照. AOF 文件重写在 持久化选项 中 ...

  4. JavaWeb——过滤器及监听器

    什么是过滤器? 过滤器示意图 Filter是如何实现拦截的? Filter的生命周期 Filter的创建 Filter的销毁 FilterConfig接口 Servlet过滤器有关接口 过滤器配置 F ...

  5. jvm系列五-java内存模型初览(1)

    本文转载自:再有人问你Java内存模型是什么,就把这篇文章发给他. 网上有很多关于Java内存模型的文章,在<深入理解Java虚拟机>和<Java并发编程的艺术>等书中也都有关 ...

  6. 树的直径&树的重心

    树的直径 定义 那么树上最远的两个点,他们之间的距离,就被称之为树的直径. 树的直径的性质 1. 直径两端点一定是两个叶子节点. 2. 距离任意点最远的点一定是直径的一个端点,这个基于贪心求直径方法的 ...

  7. WPF 之 MultiBinding（多路 Binding）（四）

    一.前言 ​ 有时候 UI 需要显示的信息由不止一个数据来源决定,这时候就需要使用 MultiBinding ,即多路 Binding. ​ MultiBinding 与 Binding 一样均以 B ...

  8. fsck获取文件的block信息和位置信息

    原文链接:lxw的大数据田地 » hdfs fsck命令查看HDFS文件对应的文件块信息(Block)和位置信息(Locations) 关键字:hdfs fsck.block.locations 在H ...

  9. 利用github+hexo搭建的博客

    用github+hexo新建了一个博客,欢迎来访,如果想要搭建类似框架的博客,可以联系我. 新博客地址:只为自由书写的博客

  10. GPTL L3-003 社交集群（并查集）

    数据有些弱,Union函数不判不等也可以过. 题意: 依次给出 n 个人的兴趣,不同人兴趣相交.不同兴趣所属人员相交均属于同一集群,求形成的不相交集群个数及每个集群的人数. 思路: 枚举每个兴趣的人员 ...