CSS 基础 1

Siona

CSS 基础 1

聚焦 `:focus`

普通 dom 元素聚焦，必须使用 tabindex 属性。

tabindex 属性：

tabindex 值为整数，有正数、负数、0 三种情况
若是设置负值，一般设置 -1，让元素可以用聚焦（不能通过键盘导航来访问到该元素），某些情况下，特别好用
tabindex 值设置正数，按下 tab 键就可以访问了

一般不去设置 tabindex，除非需要设定按下 tab 键盘切换的顺序，设置为负值也只是为了让这个 dom 可以聚焦，可以 :focus。


<div class="icon-label" tabindex="-1">tabindex="-1"可通过焦点访问到</div>

<style scoped lang="scss">
    /* 搭配 tabindex 就可以使用 :focus 选择器了 */
    .icon-label {
        &:focus {
            background-color: cornflowerblue;
        }
    }
</style>

:focus.png

目录

聚焦 :focus