如何通过类名修改div内多个<a>锚点标签的样式属性？

问题分析 #

你当前的JavaScript代码存在两处关键问题：

• 选择器错误：querySelectorAll('dropdown_child')缺少类选择器前缀.，且你的目标是选中.dropdown_child容器内的所有<a>标签，正确选择器应为.dropdown_child a
• 集合操作错误：querySelectorAll返回的是NodeList元素集合，无法直接通过.style批量设置样式，必须遍历每个元素单独操作

解决方案 #

方法1：使用JavaScript修改样式 #

修正后的代码会遍历所有目标<a>标签，逐一设置样式：

// 精准选中.dropdown_child内的所有<a>标签
const targetLinks = document.querySelectorAll('.dropdown_child a');

// 遍历每个标签设置样式
targetLinks.forEach(link => {
  link.style.color = 'white';
  link.style.textDecoration = 'none';
  // 若需设置.dropdown_child容器的高度，单独选中该元素操作
  // const dropdownContainer = document.querySelector('.dropdown_child');
  // dropdownContainer.style.height = '0px';
});

方法2：优先推荐使用CSS（样式控制更高效） #

样式类的控制优先用CSS实现，代码更简洁且易维护：

/* 直接设置.dropdown_child内所有<a>标签的样式 */
.dropdown_child a {
  color: white;
  text-decoration: none;
}

/* 若需设置.dropdown_child容器的高度 */
.dropdown_child {
  height: 0px;
}

额外修正 #

你HTML中关闭按钮的onclick代码语法无效，若要实现点击关闭下拉菜单，可修改为：

<a href="#" onclick="document.querySelector('.dropdown_child').style.display = 'none'">&times; Close</a>

内容的提问来源于stack exchange，提问作者Nicolas