讓我們今天繼續看下去吧
focus-within這個主要是給容器用的，當套在容器上時觸發條件為，當容器內的物件獲得焦點時觸發focus-visible觸發方式用鍵盤而非滑鼠的方把焦點移到上面時，通常是按tab的時候
下面是範例
<style>
.test {
width: 100px;
}
.test:focus {
background-color: aqua;
}
.within:focus-within {
border: 2px solid blue;
}
.test:focus-visible {
background-color: red;
}
</style>
<body>
<div class="d-flex justify-content-center flex-wrap mt-5">
<div class="within" style="width: 200px;height: 100px;">
<button type="button" class="test">
點我
</button>
</div>
</div>
</body>
target觸發方式錨點，錨點是甚麼?主要是用於在自己的網頁內做跳轉
如果你有在用hackmd做筆記的話，他的左邊可以跳到固定的一些小目錄，這時你可以看一下他的網址
當你點下去之後網頁後面就會接一個#(你的跳轉處)
而target就是當你網頁上有對應的錨點，他就會觸發
範例
<style>
#section:target {
background-color: lightblue;
}
</style>
<body>
<a href="#section">點a</a>
<a href="#" id="section">[取消瞄點]</a>
</body>
當你點a後，就會讓你的網頁擁有錨點，借時擁有錨點(對應id)的物件背景就會變成淺藍色
關於錨點的更多應用可以看這 https://kknews.cc/zh-tw/tech/ena88ry.html
這就比較沒什麼再用了(我自己)
他主要是應用在<a>連結，在你點選之後便會一直觸發
a:visited {color: red;}
就差不多這樣，主要應該是跟背景去搭配，不過通常不是直接把變換顏色取消掉，不然就是把背景設定為白or黑色，預設的搭配起來也很夠了
分享一下我平常怎用a連結
直接設定顏色可以固定a的顏色，然後再取消底線，我個人是只會搭配:hover當指到時變換顏色，我自己是覺得這樣的美觀度比較好
a {
color: blue;
text-decoration: none;/*取消底線*/
}
OK就到這啦
iThome鐵人賽
看影片追技術
看更多