CSS奇怪但偶尔实用的技巧

IE 与 人类最好的朋友 就不用看了,直接走吧,不兼容的

伪元素获取自定义的标签属性

你是否还在为伪元素content内容发愁呢?,试试 content:attr(data); 吧…

• 设置各种伪元素内容,如::before, ::after

nth-of-type

选中指定范围的元素

:nth-of-type(2n) 等同于 :nth-child(odd)
:nth-of-type(2n+1) 等同于 :nth-child(even)

文字两端对齐

text-align-last: justify; 等同于 justify-content: space-between;

:not()

排除一些没必要的元素,比如面包屑的分隔符

/* 我爱死链式调用了,什么,这不是js? */ 
ul > li:not(:last-child)::after {
  content: ",";
}

超出指定行数后显示为省略号

啊,其实我以前用的都是 vue 的过滤器,没想到还有这个css属性
宝贝收到了,孩子很喜欢,猛地打开了编辑器,砰的一声敲下了代码

display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
-webkit-box-orient: vertical; /*值必须为vertical*/
-webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/

其它

• caret-color 光标颜色
• writing-mode 规定文字排列方向,如一些语言是从右往左的,配合换行,字间距等食用更佳
• clip-path / shape-outside 裁剪元素的可显示区域
• object-fit / object-position 替换元素的适应方式和定位
• max() / min() / clamp() 函数,用 , 分割,取最大/最小/中间值
• conic-gradient() 各种方向的渐变
• :out-of-range / :in-range 常用于验证表单,设置该指是否符合预期的样式