CSS3中實現(xiàn)單選功能的方法

在CSS3中，我們可以使用多種方法來實現(xiàn)單選功能，以下是一種簡單的方法：

1、我們需要創(chuàng)建一個包含所有選項的容器，可以使用div或ul元素。

2、我們給每個選項添加一個新的樣式類，selected”。

3、使用JavaScript或jQuery來監(jiān)聽用戶的點擊事件，當用戶點擊某個選項時，我們給該選項添加“selected”樣式類，并移除其他選項的“selected”樣式類。

4、在CSS中，我們可以為“selected”樣式類添加一些樣式，例如顏色、字體加粗等，以突出選中的選項。

下面是一個簡單的示例代碼：

HTML代碼：

<div class="container">
  <div class="option">選項1</div>
  <div class="option">選項2</div>
  <div class="option selected">選項3</div>
  <div class="option">選項4</div>
  <div class="option">選項5</div>
</div>

CSS代碼：

.selected {
  color: red;
  font-weight: bold;
}

JavaScript代碼：

var options = document.querySelectorAll('.option');
var selectedOption = null;
for (var i = 0; i < options.length; i++) {
  options[i].addEventListener('click', function() {
    if (selectedOption) {
      selectedOption.classList.remove('selected');
    }
    this.classList.add('selected');
    selectedOption = this;
  });
}

在這個示例中，我們創(chuàng)建了一個包含5個選項的容器，并給每個選項添加了一個“option”樣式類，我們使用JavaScript來監(jiān)聽每個選項的點擊事件，當用戶點擊某個選項時，我們給該選項添加“selected”樣式類，并移除其他選項的“selected”樣式類，我們在CSS中為“selected”樣式類添加了一些樣式，以突出選中的選項。