CSS獲取焦點屬性的作用是為了控制瀏覽器中正在獲取用戶輸入的元素的樣式。通過改變獲取焦點元素的樣式，可以讓用戶清晰地知道自己正在輸入哪個元素，提高用戶體驗。 CSS獲取焦點屬性包括 outline、:focus 以及:focus-within 三個屬性。

/*修改元素outline屬性*/
:focus{
outline:2px solid #000;
}
/*修改元素背景色，同時修改子元素的顏色*/
.parent:focus-within{
background-color:#fff;
color:#000;
}
.parent:focus-within span{
color:#f00;
}

其中outline屬性可以用來控制獲取焦點元素的外邊框樣式，通過設置不同的顏色和線條大小，可以在用戶輸入的時候提高樣式的可見性。而:focus和:focus-within 兩個偽類則可以用來控制元素內部樣式，根據當前獲取焦點的元素設置不同的背景色、字體顏色等等，這樣用戶就可以清楚地看到自己正在輸入的位置了。