如果您需要對偽級的複習，請在我們的CSS課程中跳到CSS偽類課程。
：焦點偽級
首先，首先，：focus
偽級適用於元素
進一步讀取：
：非相互作用的元素，例如``lt; p＆gt;，h1＆gt;，blockquote＆gt;，code et，code et，等，等等，都不是集中的，因此不能成為：focus：focus。只有當我們將Tabindex屬性設置在它們上，我們才能期望：專注於它們。
>返回：焦點，此偽級用於選擇，然後在元素處於重點狀態時將樣式應用於元素。 也許，這樣做的最幼稚的例子是考慮一個輸入字段，如下所示：
>實例示例
>我們單擊輸入字段時，它會接收到焦點，因此，瀏覽器將黑色輪廓應用到其上，如下所示：
>這有助於我們立即查看我們目前以許多輸入字段的形式以哪個輸入。
>您如何看待，我們可以確定我們目前的哪個輸入？ 設計任何類型的用戶界面的理想之處是
“使一切都盡可能容易。'>，在這種情況下，只需使用：focus pseudo即可輕鬆實現這個理想的世界-class。 本質上：
：焦點偽級（甚至其他兩個焦點偽級）都可以幫助我們
提高網頁的可訪問性。 >通過視覺上清楚地與用戶溝通他當前在網頁上的位置，我們使他很容易與網頁互動並完成他的工作而不會混淆。 >換句話說，：焦點比我們想像的更重要。
。，但這並不是唯一重要的基於焦點的偽級；我們也有
：focus-visible。
>問題：聚焦
在上面的示例中：焦點，我們考慮了一個基本的文本輸入字段。現在，讓我們轉到一個按鈕，以查看以下缺點：focus。
>實例示例
<label> <span>Name</span> <input type="text" name="name"> </label>
<button>A button</button>
，但是請等一下？這是我們想要的願望嗎？
>另一種說法：
>讓我們了解為什麼... 當我們單擊一個按鈕或任何交互元素時，通常是為了執行操作的任何交互元素時，例如。鏈接 - 我們已經知道網頁上的位置。顯然，因為我們有意識地在按鈕上單擊，所以我們當然不會對網頁上的哪個元素進行焦點感到困惑 - 我們顯然知道是我們剛剛單擊的按鈕當前具有焦點。 在這方面，在視覺上強調按鈕是當前集中的元素，這是沒有多大意義的。
但是，為什麼這對於輸入字段有意義？ 好問題。您的觀察結果是：當我們將其在輸入字段上使用時，焦點絕對可以正常工作，並且有一個簡單的原因。當我們使用鼠標單擊輸入字段時，我們的作業未完成
>；我們仍然必須將數據輸入到字段中。>由於我們的工作尚未完成，因此我們很快，顯然需要知道哪個輸入目前處於活動狀態。
最重要的是注意，輸入字段和按鈕（以及其他類似的交互式元素）之間的重要但微妙的區別： ，但請記住，這種推理僅適用於我們使用鼠標與這些元素進行交互時。 >讓我們找出...
如您所知，不僅可以使用鼠標在網頁周圍導航；我們也可以為此使用鍵盤， 想像有人打破了他們的鼠標設備，現在想為他們的考試做準備，目前無法訂購另一個。最糟糕的情況是，如果該人想從僅圍繞鼠標互動構建的網站做準備。 讓我們再次說明。 >但是，當我們使用鍵盤時，創建視覺強調是最必要的
問題是我們無法使用：專注於這種樣式關注的問題，因為...好 >
現在怎麼樣？
不需要擔心，因為我們有：focus-visible進行救援！ >
：焦點可見的偽級
>我非常強調以下事實：在學習編程中的任何東西之前，先凝視其命名法（ ）。含義本身的含義很高。 >
之後，如果我們分析了名稱：focus-discible，它顯然與 有關，但與'可見'。 > >您可以通過名稱弄清楚這個偽級的含義？
好，：焦點可見度適用於焦點 焦點可見的元素。
：僅當我們使用鍵盤或其他一些非小鼠互動將焦點置於焦點時（例如，用於使用JavaScript）。
最重要的是 - 這真的很重要 - ：當焦點可視化不適用於按鈕（以及類似元素），當它們通過鼠標互動而獲得焦點時，它們不適用於 >這樣，讓我們回到我們的lt; button＆gt;上面的示例並替換為：焦點規則：focus-visible，以便僅當按鈕通過鍵盤接收到焦點時才顯示輪廓：
>實例示例 這是我們單擊按鈕（使用鼠標）時得到的： 什麼都沒有。 >但是，當我們按下標籤鍵以導航到按鈕並將其重點放在焦點上時，我們會得到與以前相同的輪廓： >這使我們得到了最終的結論，即當造型按鈕（或其他類似類似的元素，例如，例如＆lt; a＆gt;）時，我們必須最好使用：focus-vissible而不是：focus：focus （由於上面看到的原因）。 🎜>
：焦點可見是英雄！ （但是我不知道電影的名字！）
：focus-withinpseudo-class，我們無法結束本文。讓我們現在就這樣做。 >
>換句話說，任何包含匹配的後代元素的元素：焦點或本身匹配：焦點，是：focus-within。
以下是一個示例：
>我們在a＆lt; div; div;中包含一個按鈕。我們的目標是設計＆lt; div＆gt;特別是當它的按鈕焦點時。以下CSS實現了這一點：
很基本。 ？注意：請記住：焦點 - 焦點的行為完全像：聚焦在其中，它也顯示在按鈕上的鼠標相互作用上。它沒有表現出類似的行為：焦點可見。 >現在，您可能正在尋找一個更實用的例子：焦點 - 溫命，這正是我接下來要做的。 ：焦點 - 溫辛並不是CSS中常用的，但是某些情況下可以很好地使用：focus-within來優雅地解決。繼續閱讀以了解這種情況。 >假設我們在網站上有一個可訪問欄，該網站僅在使用鍵盤導航時出現。最初，它是隱藏的，但僅在視覺上；也就是說，可以將其標記為此欄內的任何一個按鈕。 ？注意：'僅視覺上隱藏'意味著元素沒有顯示：無或可見性：隱藏在其上以其他方式將其隱藏起來。例如，不透明度：0僅在視覺上隱藏一個元素。 >現在，當此可訪問性欄中的任何按鈕都焦點焦點時，就需要向用戶展示此欄。 但是，當其兩個按鈕都有焦點時，如何選擇可訪問性欄？ >是'可訪問性'的簡短形式，所需的選擇器將為.a11y-bar：focus-within。
> .a11y-bar：焦點 - 焦點在焦點駐留在其中時選擇.a11y-bar，這正是我們需要的。
好！
>實例示例
進一步閱讀
儘管我們已經涵蓋了幾乎需要了解的所有內容：focus，：focus-codis-com-cob-within，但從某些資源中進一步閱讀仍然有價值： 了解成功標準2.4.7：聚焦可見| Wai | W3C
>
同樣。
實際上，如果以這種方式構建網頁以啟用鼠標互動，則非常難以訪問。
<label>
<span>Name</span>
<input type="text" name="name">
</label>
），適用於其中具有>的元素
>。
實用用例：焦點 - 件
使用CSS：可提供的焦點可提供鍵盤焦點指示 - WCAG 2.1技術
9.3。輸入焦點pseudo-class ：： focus - 選擇器級別4 | W3C
以上是CSS中的焦點，焦點可見度和：焦點 - 焦點之間有什麼區別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
