:focus 用於直接聚焦元素本身，:focus-within 則用於當(dāng)子元素獲得焦點(diǎn)時影響父容器。 1. :focus 只對當(dāng)前元素生效，常用於輸入框高亮；2. :focus-within 應(yīng)用於包含交互元素的容器，當(dāng)其子元素被聚焦時觸發(fā)樣式變化，如表單組或搜索框的整體高亮；3. 使用時應(yīng)確保可訪問性，保留清晰的焦點(diǎn)指示，並結(jié)合鍵盤導(dǎo)航測試。兩者共同提升界面的可用性和用戶體驗(yàn)。

When you're working with interactive elements in CSS, :focus and :focus-within are two pseudo-classes that help you style elements based on user interaction — specifically, when they receive focus. These selectors come in handy when building accessible and user-friendly interfaces.

What is :focus ?

The :focus pseudo-class applies styles to an element when it receives focus, typically through keyboard navigation (like using the Tab key) or when a user clicks or taps on certain form elements like inputs or buttons.

Common use case:
You'll often see :focus used to highlight input fields when a user is typing into them. For example:

 input:focus {
  border-color: blue;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.3);
}

This helps users understand where they are on the page, especially those navigating via keyboard.

Things to keep in mind:

• Make sure not to remove the default focus outline without replacing it with something equally visible — doing so can hurt accessibility.
• :focus only affects the element itself when it's focused, not its children or parent.

What is :focus-within ?

:focus-within is similar but more powerful. It applies styles to a parent element if any of its descendants are focused. That makes it super useful for styling containers or forms when one of their internal elements (like an input) becomes active.

Example scenario:
Let's say you have a search form inside a div. When the user focuses on the input field, you want to highlight the whole container.

 .search-container:focus-within {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

This way, even though the focus is on the input, the entire .search-container gets styled.

Useful applications include:

• Highlighting form groups when an input inside them is focused.
• Opening dropdowns or menus when a child input or button is focused.
• Improving usability by giving visual feedback when nested interactive elements are active.

When to Use Which?

Knowing when to reach for :focus vs :focus-within depends on what part of your UI needs to respond to focus events.

• Use :focus when you only need to style the focused element itself.
• Use :focus-within when you want to affect the parent or surrounding elements based on a child being focused.

Both are great tools for making your site more responsive and accessible. Just remember:

• Test with real keyboard navigation.
• Don't forget about screen readers and other assistive tools.
• Keep visual focus indicators clear and consistent.

基本上就這些。

以上是什麼是：焦點(diǎn)和：焦點(diǎn)偽級？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！