今天天来妹儿给大家分享的是使用 :focus-within 来实现 tab 切换功能。如下图：
编辑
:focus-within 它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。
这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。
关键点
- 这个属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发 :focus-within 事件
- 本例子的思路就是通过获焦来控制其他选择器，以及最重要的是利用了父级的 :not(:focus-within) 来设置默认样式
HTML：
1 <div class="container">
2 <div class="nav-box">
3 <button class="nav-a">Tab-A</button>
4 <button class="nav-b">Tab-B</button>
5 <div class="content-box">
6 <div class="content-a">content-a</div>
7 <div class="content-b">content-b</div>
8 </div>
9 </div>
10 </div>
CSS：
1.container{
2 width: 300px;
3 margin: 50px auto;
4 padding: 10px;
5 border: 1px solid #ddd;
6 }
7 .nav-box{
8 font-size: 0;
9 }
10 button{
11 width: 150px;
12 height: 64px;
13 box-sizing: border-box;
14 outline: none;
15 background-color: #fff;
16 border: 1px solid #ddd;
17 font-size: 18px;
18 cursor: pointer;
19 }
20 button:focus-within{
21 color: #fff;
22 background-color: #ffcc00;
23 }
24 .content-box{
25 font-size: 24px;
26 border: 1px solid #ddd;
27 height: 100px;
28 }
29 .content-box div{
30 display: none;
31 }
32 .nav-box:not(:focus-within) .nav-a{
33 color: #fff;
34 background-color: #ffcc00;
35 }
36 .nav-box:not(:focus-within) .content-a{
37 display: block;
38 }
39 .nav-a:focus-within ~ .content-box .content-a{
40 display: block;
41 }
42 .nav-b:focus-within ~ .content-box .content-b{
43 display: block;
44 }
