CSS :nth-of-type() bug
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的更多相关文章
- vue bug & data type bug
vue bug & data type bug [Vue warn]: Invalid prop: type check failed for prop "value". ...
- CSS中常见的BUG调试
1.布局--layout 布局是windows提出的概念,用于控制元素的尺寸和定位. 拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制. 通常在IE6中出 ...
- CSS的兼容性与BUG处理
骨灰级清除浮动 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility ...
- CSS修改input[type=range]滑块样式
input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...
- CSS美化 input type=file 兼容各个浏览器（转）
HTML代码: <FORM> <A class=btn_addPic href="javascript:void(0);"><SPAN>< ...
- css重点知识和bug解决方法
1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...
- css 重点知识 和 bug 解决方法
1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...
- 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 ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
随机推荐
- 【9k字+】第二篇：进阶：掌握 Redis 的一些进阶操作（Linux环境）
九 Redis 常用配置文件详解 能够合理的查看,以及理解修改配置文件,能帮助我们更好的使用 Redis,下面按照 Redis 配置文件的顺序依次往下讲 1k 和 1kb,1m 和 1mb .1g 和 ...
- QQ刷屏助手
本人小学生,求大佬轻点儿 制作原因 原因很简单,还不是想报仇呗! 代码 1 # 原理是先将需要发送的文本放到剪贴板中,然后将剪贴板内容发送到qq窗口 2 # 之后模拟按键发送enter键发送消息 3 ...
- 今天聊点干货—关于CSS样式来源
样式来源 CSS样式共有5个来源,它们分别是\(\color{#FF3030}{浏览器默认样式}\).\(\color{#FF3030}{用户样式}\).\(\color{#FF3030}{链接样式} ...
- 网络流量预测入门（二）之LSTM介绍
目录 网络流量预测入门(二)之LSTM介绍 LSTM简介 Simple RNN的弊端 LSTM的结构 细胞状态(Cell State) 门(Gate) 遗忘门(Forget Gate) 输入门(Inp ...
- NULL-safe equal null 索引 空字符串
小结 1. mysql> INSERT INTO my_table (phone) VALUES (NULL); 有手机号但是不知道 mysql> INSERT INTO my_table ...
- QTREE----树剖
题目内容: ---------------------------------------------------- Query on a tree Time Limit: 851MS Memor ...
- SpringMVC听课笔记（一：SpringMVC概述）
地址 :https://www.bilibili.com/video/av14907450 版本:4.x 概述: 概要: 一:SpringMVC概述 二:SpringMVC的 HelloWorld 三 ...
- DEDECMS的20位MD5加密密文解密
解密20位md5,20位md5加密算法. dedecms的20位md5加密算噶是从32位md5中截取的20位,所以去掉前3位喝最后1位,即可获得16位md5值,即可破解15位md5. 例如: ...
- Python Line Messaging Api
Line Messaging line 是国外一个很火的实时通信软件,类似与WX,由于公司业务需求,需要基于line开发一个聊天平台,下面主要介绍关于line messaging api 的使用. 官 ...
- CF Hello2020 D. New Year and Conference
D. New Year and Conference 题意 有\(2n\)个区间,分别为\([sa_1,ea_1],[sb_1,eb_1],[sa_2,ea_2],[sb_2,eb_2],\cdots ...