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. Crypto.getRandomValues()

    Crypto.getRandomValues() - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/Crypto/ge ...

  2. JVM调优 jdk版本 机器配置 建议jvm参数 备注

    https://juejin.im/post/5b091ee35188253892389683 大型跨境电商JVM调优经历 前提:某大型跨境电商业务发展非常快,线上机器扩容也很频繁,但是对于线上机器的 ...

  3. Http系列：断点续传与多线程下载

    前言 当下载电影时,我常常会想中断下载后,为什么点击开始时会在中断的地方继续下载呢?又或者在看在线电影时,为什么可以按着播放条拖动就能看到想看的片段呢? http的range请求将解决以上困惑. 多线 ...

  4. LOJ10013曲线

    题目描述 明明做作业的时候遇到了n  个二次函数s_i(x)=ax^2+bx+c ,他突发奇想设计了一个新的函数 f(x)=max{s_i(x)},i=1,2,...,n. 明明现在想求这个函数在 [ ...

  5. web.xml 监听器

    一.作用 Listener就是在application,session,request三个对象创建.销毁或者往其中添加修改删除属性时自动执行代码的功能组件. Listener是Servlet的监听器, ...

  6. Hive 使用总结

    1 带分区列的表更改列类型 常见的一个场景是Hive里面一个带分区的表,原来是int类型的字段,后来发现数据超过了int的最大值,要改成bigint.或者是bigint要改string或decimal ...

  7. cassandra权威指南读书笔记--客户端

    DataStax驱动最成熟.默认,驱动程序会使用第一个连接的节点作为支持的版本协议.如果集群存在高低版本的节点(比如升级场景),如果驱动先连接不同不同版本的节点,可能会出现不兼容.驱动支持压缩客户端和 ...

  8. python格式转换的记录

    Python的格式转换太难了. 与其说是难,具体来说应该是"每次都会忘记该怎么处理".所以于此记录,总的来说是编码+格式转换的记录. 本文记录环境:python3.6 经常见到的格 ...

  9. 校招有感：计算机专业毕业生如何找工作（Java方向）

    这两年毕业生的就业形势,大家都看在眼里.由于我平时本职会到校园去做校招,兼职会做培训,所以也接触到了不少计算机应届毕业生. 我看到的计算机专业毕业生,各种情况的都有.虽然其中有学校的因素,但学校的因素 ...

  10. 使用 noexcept 我们需要知道什么？

    noexcept 关键字 noexcept 是什么? noexcept 是自 C++11 引入的新特性,指定函数是否可能会引发异常,以下是 noexcept 的标准语法: noexcept-expre ...