html+css写一个级联选择器

好的，下面是一个简单的HTML+CSS级联选择器示例。

首先，我们需要创建HTML结构。在这个例子中，我们将使用三个下拉菜单，分别选择省、市和县/区。

<div class="select-wrapper">
  <select id="province">
    <option value="">请选择省份</option>
    <option value="beijing">北京市</option>
    <option value="shanghai">上海市</option>
    <option value="guangdong">广东省</option>
  </select>
  <select id="city">
    <option value="">请选择城市</option>
  </select>
  <select id="area">
    <option value="">请选择区域</option>
  </select>
</div>

然后，我们需要使用CSS来为这些下拉菜单添加样式，并使用JavaScript来实现级联选择器的功能。

.select-wrapper select {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 16px;
}

.select-wrapper select:last-child {
  margin-right: 0;
}

最后，我们需要使用JavaScript来实现级联选择器的功能。具体来说，我们需要在省份下拉菜单选择后，动态生成对应城市的选项；在城市下拉菜单选择后，动态生成对应区县的选项。

var cities = {
  beijing: ["北京市"],
  shanghai: ["上海市"],
  guangdong: ["广州市", "深圳市", "珠海市", "汕头市"],
};

var areas = {
  "北京市": ["东城区", "西城区", "朝阳区", "海淀区"],
  "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区"],
  "广州市": ["天河区", "越秀区", "荔湾区", "海珠区"],
  "深圳市": ["福田区", "罗湖区", "南山区", "宝安区"],
  "珠海市": ["香洲区", "斗门区", "金湾区"],
  "汕头市": ["金平区", "龙湖区", "澄海区", "潮阳区"],
};

var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");

province.addEventListener("change", function() {
  var selectedProvince = this.value;
  city.innerHTML = "<option value=''>请选择城市</option>";
  area.innerHTML = "<option value=''>请选择区域</option>";
  if (selectedProvince) {
    for (var i = 0; i < cities[selectedProvince].length; i++) {
      var option = document.createElement("option");
      option.value = cities[selectedProvince][i];
      option.innerText = cities[selectedProvince][i];
      city.appendChild(option);
    }
  }
});

city.addEventListener("change", function() {
  var selectedCity = this.value;
  area.innerHTML = "<option value=''>请选择区域</option>";
  if (selectedCity) {
    for (var i = 0; i < areas[selectedCity].length; i++) {
      var option = document.createElement("option");
      option.value = areas[selectedCity][i];
      option.innerText = areas[selectedCity][i];
      area.appendChild(option);
    }
  }
});

这样，我们就完成了一个简单的HTML+CSS级联选择器的编写。