CSS新手技术疑问：为何不能大量使用选择器应用样式声明？

你的代码问题核心 #

你写的代码样式没生效，根本原因不是选择器数量多，而是样式作用的元素不对，再加上对CSS继承、元素默认样式的理解有偏差。

先拆解你代码的问题点 #

你的CSS选择器是header nav ul，作用在<ul>元素上，但：

• text-decoration: none：这个属性控制的是文本装饰（比如下划线），而页面里的下划线是<a>标签自带的，给<ul>加这个样式完全没用，得直接给<a>标签设置。
• color: black：<a>标签有浏览器默认的蓝色样式，它不会继承<ul>的黑色，所以这个颜色也不会生效。
• list-style: none：这个是有效的，能去掉<ul>的默认圆点，但另外两个样式等于白写。

为啥不建议堆大量选择器？ #

• 样式错配概率高：很多CSS属性只能作用在特定元素上，堆选择器很容易选到错误的元素，导致样式不生效。
• 优先级冗余难维护：选择器层级越多，优先级越高，以后要修改这个样式就得写更复杂的选择器，反而增加麻烦。
• 结构变动易失效：如果以后页面结构调整（比如把<nav>改成<div>），你的选择器直接失效，得重新写；而用类选择器的话，不管结构怎么变，只要类名不变，样式就有效。
• 继承陷阱容易踩：不是所有CSS属性都会自动继承给子元素，比如text-decoration、border这些就不会；而像<a>、<input>这类元素有自己的默认样式，会覆盖继承来的样式。

修正后的代码示例 #

方法1：精准选择目标元素

/* 重置ul的默认列表样式 */
header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 直接给a标签设置文本样式 */
header nav ul li a {
  text-decoration: none;
  color: black;
}

方法2：用类选择器（更推荐，灵活度更高）

<header>
  <nav>
    <ul class="nav-list">
      <li><a href="#" class="nav-link">Home</a></li>
      <li><a href="#" class="nav-link">About</a></li>
      <li><a href="#" class="nav-link">Blog</a></li>
      <li><a href="#" class="nav-link">Contact</a></li>
    </ul>
  </nav>
</header>

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  text-decoration: none;
  color: black;
}

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