在網頁開發中，CSS是非常重要的一部分。其中

和
• 是常見的HTML標簽，它們可以創建無序列表。但是，如果我們要讓這個無序列表在用戶點擊時變色，該怎么實現呢？下面我們來一步步實現。

  <ul>
  <li><a href="#">列表項1</a></li>
  <li><a href="#">列表項2</a></li>
  <li><a href="#">列表項3</a></li>
  <li><a href="#">列表項4</a></li>
  </ul>

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

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

  在上面的代碼中，我們為ul標簽下的所有li標簽中的超鏈接a:hover設置新的CSS屬性color和background-color。當鼠標懸停在某個列表項上時，這些屬性將會生效。

  如果我們只想讓某個特定的列表項在被點擊后變色，而不是在懸停時變色，我們可以在CSS中添加一個:active偽類選擇器。

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

  在上面的代碼中，我們為ul標簽下的所有li標簽中的超鏈接a:active設置新的CSS屬性color和background-color。當用戶點擊某個列表項時，這些屬性將會生效。

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