%table {
cx-table {
&.vertical-stacked tbody,
&.vertical tr {
// highlight the items on hovering
&:hover:not(.is-current) {
background-color: var(--cx-color-background);
}
// highlight current items
&.is-current {
outline: solid 3px var(--cx-color-primary);
outline-offset: -3px;
background: var(--cx-color-background-focus);
}
&:focus-within {
@include visible-focus();
outline-offset: -2px;
}
}
}
用一个简单的HTML来测试这个伪类的使用：
<html>
<style>
button:focus-within {
outline-style: solid;
outline-color: blue;
outline-width: 4px;
outline-offset: 4px;
transition: 2s;
}
</style>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
</body>
</html>
:focus - 将样式添加到获得焦点的元素
CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
效果：点了tab后：
点击focus，同样能看到蓝色border的渐进效果：
更多Jerry的原创文章，尽在："汪子熙":
网友评论