tabindex 和 :empty

tabindex = -1

<div id="area" class="area" tabindex="-1"></div>

当我看到tabindex这个属性时，完全不知道它的用法，于是我继续在张鑫旭大佬的博客中搜索，找到一篇叫《HTML tabindex属性与web网页键盘无障碍访问》的文章，这里简要说下这个属性的用法和作用。

tabindex是一个与键盘访问行为息息相关的属性，它是一个全局属性，即所有 HTML 标签都可以用的属性，比如id，class等属性。因此，它就可以在div上使用。另外，这个属性没有兼容性问题，放心使用。

我们平常可能感觉不到它的价值，但是一旦我们的鼠标坏掉了或者没电了，我们就只能使用键盘来操作。亦或者在电视机上，或者投影设备上访问我们的网页的时候，我们只能使用遥控器上的按钮，可以看出是电脑的键盘。就算设备都完全正常，对于资深用户而言，键盘访问可以大大提高我们的使用效率。

当一个元素设置tabindex属性值为-1的时候，元素会变得focusable。focusable指的是元素可以被鼠标或者 JS focus，在 chrome 浏览器下表现为会有outline发光效果，IE浏览器下是虚框，同时能够响应focus事件。

默认的focusable元素有<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。

但是，tabindex = -1不能被键盘的tab键进行focus。这种鼠标可以focus，但是键盘却不能focus的状态，只要tabindex属性值为负值就可以了。

因此，代码中利用了这一特性，设置div被focus的样式，当鼠标点击div时，我们可以改变它的边框，如下：

.area:focus {
    border-style: solid;
 }

tabindex属性值是一个整数，它是用来决定被tab键focus的顺序，顺序越小越先被focus，但是 0除外，如下div被focus的顺序依次是：1，2，3。

<div id="area" class="area" tabindex="1"></div>
<div class="area" tabindex="3"></div>
<div class="area" tabindex="2"></div>

那tabindex="0"又是怎么回事呢？

元素设置tabindex="-1"，可以鼠标和 JS 可以focus，但键盘不能focus。

tabindex="0"和tabindex="-1"的唯一区别就是键盘也能focus，但是被focus的顺序是最后的，也就是当你使用tab进行聚焦时，最后才会聚集到tabindex="0"的元素。

<div>设置了tabindex="0"，从键盘访问的角度来讲，相对于<div>元素变成了<button>元素。

:empty::before

当div元素没有内容时，.area:empty样式会生效，同时为了显示一段提示内容，使用了伪元素::before，在content写入提示内容。

.area:empty::before {
    content: '或粘贴图片到这里';
    color: gray;
}

这个 css 样式平时用的少，所以这里特意的记录下，以免自己忘记。
来源: https://juejin.cn/post/7248874230862233655