前端口袋小册-第 59 期

husky in Beijing

2021-07-02

Brochure

# CSS 实用技巧

列举几个例子

1.a 空标签自动显示 herf 属性

a[href^="http"]:empty::before,
a[href^="https"]:empty::before {
  content: attr(href);
}

1
2
3
4

2.unset 重置标签属性为初始值

<!-- IE11不支持all和unset -->
button {
  all: unset;
}

1
2
3
4

3.快速禁用鼠标指针事件

<!-- 在标签上直接添加 button-disabled 类 -->
.button-disabled{
  opacity: .5;
  pointer-events: none
}

1
2
3
4
5

4. 负 nth-child 选择元素

n 取值从 0 开始
不存在第 0 个标签，因为标签元素从 1开始
偶数可用 even 快捷方式，奇数可用 odd 快捷方式
nth-child(an + b) 其中 an 必须写在 b 的前面，不能写成 b+an 的形式

<!-- 前 3 个之标签隐藏，其他隐藏 -->
<!-- n 从 0 开始 -->
<!-- n = 0, -n + 3 = 3 -->
<!-- n = 1, -n + 3 = 2 -->
<!-- n = 2, -n + 3 = 1 -->
<!-- n = 3, -n + 3 = 0, 不存在第 0 个标签，结束 -->
li:not(:nth-child(-n+3)) {
  display: none;
}