在網(wǎng)頁開發(fā)中，CSS是非常重要的一部分。其中

和
• 是常見的HTML標(biāo)簽，它們可以創(chuàng)建無序列表。但是，如果我們要讓這個(gè)無序列表在用戶點(diǎn)擊時(shí)變色，該怎么實(shí)現(xiàn)呢？下面我們來一步步實(shí)現(xiàn)。

  <ul>
  <li><a href="#">列表項(xiàng)1</a></li>
  <li><a href="#">列表項(xiàng)2</a></li>
  <li><a href="#">列表項(xiàng)3</a></li>
  <li><a href="#">列表項(xiàng)4</a></li>
  </ul>

  我們先在HTML中創(chuàng)建一個(gè)基本的無序列表，每一個(gè)列表項(xiàng)中都包含了一個(gè)超鏈接。接下來，我們要使用CSS為其中的超鏈接設(shè)置點(diǎn)擊后的樣式。我們可以通過使用:hover偽類選擇器來實(shí)現(xiàn)這一點(diǎn)。這個(gè)偽類選擇器可以為鼠標(biāo)懸停在某個(gè)元素上時(shí)設(shè)置一個(gè)新的CSS樣式。

  <style>
  ul li a:hover {
  color: red;
  background-color: yellow;
  }
  </style>

  在上面的代碼中，我們?yōu)閡l標(biāo)簽下的所有l(wèi)i標(biāo)簽中的超鏈接a:hover設(shè)置新的CSS屬性color和background-color。當(dāng)鼠標(biāo)懸停在某個(gè)列表項(xiàng)上時(shí)，這些屬性將會(huì)生效。

  如果我們只想讓某個(gè)特定的列表項(xiàng)在被點(diǎn)擊后變色，而不是在懸停時(shí)變色，我們可以在CSS中添加一個(gè):active偽類選擇器。

  <style>
  ul li a:active {
  color: blue;
  background-color: pink;
  }
  </style>

  在上面的代碼中，我們?yōu)閡l標(biāo)簽下的所有l(wèi)i標(biāo)簽中的超鏈接a:active設(shè)置新的CSS屬性color和background-color。當(dāng)用戶點(diǎn)擊某個(gè)列表項(xiàng)時(shí)，這些屬性將會(huì)生效。

  綜上所述，使用CSS的:hover和:active偽類選擇器可以很容易地讓我們的無序列表在用戶的交互下變色。我們可以根據(jù)需求自定義不同的CSS屬性來實(shí)現(xiàn)不同的樣式效果。