CSS div focus

CSS div focus是一種CSS選擇器，它允許我們為在HTML文檔中獲得焦點的div元素應用樣式。當用戶通過鍵盤或鼠標與應用了焦點的div元素進行交互時，我們可以通過CSS div focus選擇器來改變其外觀或行為。

示例1：改變焦點div元素的背景顏色

<code>
<style>
div:focus {
background-color: yellow;
}
</style>
<br>
    <div tabindex="0">
這是一個div元素。
</div>
</code>

在上述示例中，我們使用CSS div focus選擇器來改變應用了焦點的div元素的背景顏色為黃色。要使div元素可接受焦點，我們在HTML中使用了tabindex屬性，將其值設置為0。

示例2：同時改變焦點div元素和其內部元素的樣式

<code>
<style>
div:focus,
div:focus * {
color: red;
font-weight: bold;
}
</style>
<br>
    <div tabindex="0">
這是一個
<span>內部元素</span>
的div元素。
</div>
</code>

在上述示例中，我們使用CSS div focus選擇器來同時改變應用了焦點的div元素及其內部元素的顏色和字體加粗。通配符(*)選擇器用于選中div元素內所有的元素。

示例3：通過CSS div focus改變div元素展示的內容

<code>
<style>
div:focus::after {
content: "（已獲得焦點）";
}
</style>
<br>
    <div tabindex="0">
這是一個div元素。
</div>
</code>

在上述示例中，我們使用CSS div focus選擇器和偽元素(::after)來改變應用了焦點的div元素展示內容。通過設置content屬性，我們在div元素之后插入了一段文字"（已獲得焦點）"。

通過CSS div focus選擇器，我們可以為應用了焦點的div元素定義樣式。這使得我們能夠在用戶與網頁交互時，改變元素的外觀或行為。以上示例提供了一些使用CSS div focus選擇器的常見情況，但我們還可以根據具體需求創造更多不同的效果。