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. vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". Expected String with value "0", got Number with value 0.

    vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". ...

  2. 抛弃 .NET 经典错误：object null reference , 使用安全扩展方法？ 希望对大家有帮助---Bitter.Frame 引用类型的安全转换

    还是一样,我不喜欢长篇大论,除非关乎我设计思想领域的文章.大家过来看,都是想节省时间,能用白话表达的内容,绝不长篇大论.能直接上核心代码的,绝不上混淆代码. 长期从事 .NET 工作的人都知道..NE ...

  3. （003）每日SQL学习：普通视图和物化视图

    关于这一点一直就是很懵懂的状态,今天特意网上查了一下资料,以下摘抄网上比较好的答案.以作记录. 普通视图和物化视图的区别答曰:普通视图和物化视图根本就不是一个东西,说区别都是硬拼到一起的,首先明白基本 ...

  4. 【SVN】windows 下的SVN常见问题及其解决方法

    1.能提交和更新,但SVN查看log时提示:找不到路径 'svn/XXXX' 双击以清除错误信息 勾选这个选项就好了.因为该路径是通过重命名或者拷贝过来的,倘若不选中,SVN便会尝试同时从当前文件的拷 ...

  5. 2021最新 Spring面试题精选（附刷题小程序）

    推荐使用小程序阅读 为了能让您更加方便的阅读 本文所有的面试题目均已整理至小程序<面试手册> 可以通过微信扫描(或长按)下图的二维码享受更好的阅读体验! 目录 推荐使用小程序阅读 1. S ...

  6. EasyExcel导出小结：动态标题、标题格式、相同值合并

    1. 实列相关依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel& ...

  7. Spark日志，及设置日志输出级别

    Spark日志,及设置日志输出级别 1.全局应用设置 2.局部应用设置日志输出级别 3.Spark log4j.properties配置详解与实例(摘录于铭霏的记事本) 文章内容来源: 作者:大葱拌豆 ...

  8. scp命令------两服务器之间传输数据

    scp就是secure copy,是用来进行远程文件拷贝的.数据传输使用 ssh,并且和ssh 使用相同的认证方式,提供相同的安全保证 . 与rcp 不同的是,scp 在需要进行验证时会要求你输入密码 ...

  9. libuv事件循环

    目录 1.说明 2.数据类型 2.1.uv_loop_t 2.2.uv_walk_cb 3.API 3.1.uv_loop_init 3.2.uv_loop_configure 3.3.uv_loop ...

  10. Pytest（8）parametrize参数化

    前言 当某个接口中的一个字段,里面规定的范围为1-5,你5个数字都要单独写一条测试用例,就太麻烦了,这个时候可以使用pytest.mark.parametrize装饰器可以实现测试用例参数化. 官方示 ...