课程: CSS: Selectors

今天就学习课程吧！

今天就开通帐号，24,700 门业界名师课程任您挑！

Accessibility pseudo-classes: :focus, :focus-within

Accessibility pseudo-classes: :focus, :focus-within - CSS教程

课程: CSS: Selectors

开始一个月试用 购买团队方案

Accessibility pseudo-classes: :focus, :focus-within

“

- [Instructor] Next let's examine the pseudo classes that are all about accessibility on your webpages, including focus and focus-within, First let's focus on focus. Click anywhere within this CodePen display window to select it and then start tabbing using your tab key. This blue outline that you see is the browser default styling, and it's super important for accessibility concerns. It's great in the state that it's in, but if you want to style it further you can do that with the focus state for your links. This updates our old LVHA method for styling to LVHA or Lord Vader, Former Handle Anakin. So I'll type that out in here for you. So now it is LVFHA, Lord Vader, Former Handle Anakin. All right. So if we're going to work with any link as we are here, that of course is our link in our visited state. So focus is going to come right here. So we'll say a:focus. Then we can say our outline will be, let's say five pixel double purple. Now because I've put this on a focus, this is going…

内容