鏈接的樣式應(yīng)通過偽類區(qū)分不同狀態(tài)，1. 使用 a:link 設(shè)置未訪問鏈接樣式，2. a:visited 設(shè)置已訪問鏈接，3. a:hover 設(shè)置懸停效果，4. a:active 設(shè)置點(diǎn)擊時(shí)樣式，5. a:focus 確保鍵盤可訪問性，始終遵循 LVHA 順序以避免樣式?jīng)_突，可通過添加 padding、cursor: pointer 和保留或自定義焦點(diǎn)輪廓來提升可用性和可訪問性，還可使用 border-bottom 或動(dòng)畫下劃線等自定義視覺效果，最終確保鏈接在所有狀態(tài)下均有良好用戶體驗(yàn)和可訪問性。

Styling links in CSS is straightforward, but it’s important to understand the different states of a link and how to target them effectively. Here’s how to do it right.

Use Link Pseudo-Classes for Different States

Links have several states (like unvisited, hovered, active, etc.), and CSS provides pseudo-classes to style each one:

• a:link – Styles unvisited links
• a:visited – Styles links the user has already visited
• a:hover – Applies when the user hovers over the link
• a:active – Styles the link during the moment it's being clicked
• a:focus – Applies when the link has keyboard focus (important for accessibility)

Example:

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: orange;
}

a:focus {
  outline: 2px solid green;
}

? Tip: Always follow the LVHA order — :link, :visited, :hover, :active — to avoid unexpected style overrides.

Style All Links Uniformly (Optional)

If you want all links to look the same regardless of state, you can style the base a element:

a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

But this removes visual feedback, which isn’t great for usability.

Make Links More Clickable and Accessible

Improve usability by increasing the clickable area and ensuring focus visibility:

• Add padding to make small links easier to tap on mobile
• Use cursor: pointer to indicate interactivity
• Never remove focus outlines without replacing them with a custom accessible alternative

Example:

a {
  padding: 4px 8px;
  cursor: pointer;
  display: inline-block;
}

Bonus: Remove Underlines or Add Custom Effects

You can get creative:

• Remove underlines: text-decoration: none;
• Add a bottom border instead: border-bottom: 1px solid currentColor;
• Animate the underline on hover:

  a {
  position: relative;
  text-decoration: none;
  }

a::after { content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 0; background-color: black; transition: width 0.3s; }

a:hover::after { width: 100%; }

Basically, just remember to style the different link states, keep usability in mind, and don’t forget accessibility. It’s simple but easy to overlook the details.

以上是如何在CSS中樣式鏈接？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！