在網頁設計中，CSS（層疊樣式表）是一個非常重要的部分。CSS可以讓我們輕松地控制網頁的樣式和布局。其中，CSS focus是一個十分有用的CSS屬性，它可以幫我們實現一些特殊的效果。

:focus {
/*CSS屬性*/
}

CSS focus是用來控制網頁中某個元素被選中時的樣式。它常常用在表單元素上，比如input、textarea等。

實現一個目錄項選中時的樣式的例子：

// HTML代碼
<ul>
<li>首頁</li>
<li>關于我們</li>
<li>服務項目</li>
<li>聯系我們</li>
</ul>
// CSS代碼
ul li:focus {
background-color: #ccc;
color: #fff;
}

上面的例子中，我們利用CSS focus來控制選中某個目錄項時的背景色和字體顏色。

除了對表單元素和列表元素的實現之外，CSS focus還可以用在很多其他的元素上。比如，我們可以通過CSS focus來實現鼠標懸浮在某個元素上時的效果：

// HTML代碼
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
// CSS代碼
.box:hover {
background-color: #ccc;
}
.box:focus {
background-color: #333;
color: #fff;
}

上面的例子中，我們在CSS中同時設置:hover和:focus，當鼠標懸浮在某個元素上時，背景色會變為#ccc，當選中某個元素時，背景色變為#333，字體顏色變為白色。

總的來說，CSS focus可以幫助我們在網頁設計中完成一些特殊的效果。通過對CSS focus的學習，我們可以掌握更多的CSS技巧，為網頁設計添加更多的魅力。