如何通过SASS定位元素并修改标记元素颜色（无需类/ID）

嘿，这个问题我太熟了！不用给元素加class或者ID，照样能用SASS轻松修改它们的颜色——核心就是把CSS原生选择器用透，再结合SASS的语法糖让代码更优雅。我给你拆解几个实用的场景和写法：

如果元素在DOM里的位置是固定的，比如某个父容器下的第一个标题、第n个链接，直接用伪类和层级选择器就能锁定它，完全不用额外标记。

举个例子，假设你的HTML结构是这样：

<header>
  <h1>首页标题</h1>
  <nav>
    <a href="#">首页</a>
    <a href="#">博客</a>
    <a href="#">关于</a>
  </nav>
</header>

对应的SASS代码可以这么写：

header {
  // 选中header下的第一个h1标签
  h1:first-of-type {
    color: #ff6347;
  }

  // 选中nav里的第二个a标签
  nav a:nth-child(2) {
    color: #4682b4;
  }
}

这里用到的:first-of-type和:nth-child()都是CSS原生伪类，完全依赖元素的位置和层级关系，不需要给任何元素加class/ID。

如果元素自带独特的属性（比如type、placeholder，甚至自定义属性），用属性选择器能精准命中目标。

比如要修改所有type="submit"的按钮颜色：

button[type="submit"] {
  color: #fff;
  background-color: #20b2aa;
}

还能匹配属性的部分值，比如所有src里包含banner的图片：

img[src*="banner"] {
  border-color: #d3d3d3;
}

虽然核心是CSS选择器，但SASS的变量、嵌套、颜色函数能让你的代码更简洁、更易维护。比如先定义一个颜色变量，然后在不同选择器里复用，还能直接调整色调：

$main-accent: #9b59b6;

// 选中页面里所有blockquote
blockquote {
  color: $main-accent;
  border-left-color: darken($main-accent, 15%); // 用SASS函数加深颜色
}

// 选中footer里的所有p标签
footer {
  p {
    color: lighten($main-accent, 20%); // 用SASS函数提亮颜色
  }
}

嵌套写法也让层级关系一目了然，比纯CSS的扁平结构更直观。

有时候元素可能已经有默认的class样式，单纯的元素选择器优先级不够，这时候可以用组合选择器或者:not()伪类提升优先级，比如：

body header h1:not(.no-style) {
  color: #f1c40f;
}

这个选择器的优先级比单纯的h1高，能轻松覆盖默认样式。

总的来说，关键就是利用元素在DOM中的位置、自带属性这些“天然标识”，结合CSS选择器定位，再用SASS的语法优化代码——完全不需要给元素加额外的class或ID！

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