[分享]css中引用不了id

当我们在编写 CSS 代码时，有时候会发现无法引用特定的元素 ID，引发 代码无法生效 的问题。myId { // CSS 样式代码 } 我们可能会像上面这样定义一个 ID 选择器，但结果却发现它并没...

当我们在编写 CSS 代码时，有时候会发现无法引用特定的元素 ID，引发 代码无法生效 的问题。

#myId {
  // CSS 样式代码
} 

我们可能会像上面这样定义一个 ID 选择器，但结果却发现它并没有应用到对应的 HTML 元素上。

实际上，引用不了 ID 的原因是由于级联规则的限制。如果 CSS 选择器的路径中存在一个不必要的父级元素，那么该选择器是无法匹配到对应的元素的。

div #myId {
  // CSS 样式代码
} 

比如像上面这样在选择器路径中增加上了一个 div 元素，那么就无法正确地匹配到对应的 ID 选择器。

但有时候，在实际开发中，我们不可避免地需要在选择器路径中加入一些多余的父级元素，这时候我们可以尝试使用 CSS 属性选择器来解决这个问题。

*[id="myId"] {
  // CSS 样式代码
} 

这样我们就能够正确地匹配到对应的 ID 元素了。

总结起来，引用不了 ID 的原因是由于路径中存在过多的无需父级元素，解决方法是使用 CSS 属性选择器。