您可以使用 CSS 定位 ID 中的 ID 吗？答案

【问题标题】：Can you target with CSS an ID within ID?您可以使用 CSS 定位 ID 中的 ID 吗？
【发布时间】：2021-02-18 11:37:31
【问题描述】：

我的示例是在一个 HTML 文件中，这表示您无权更改 - 只有通过样式表的 CSS。您能否像使用 Classes 一样定位 ID 中的 ID？

#id1 #id2 {styles...}

类似于使用 CSS 的方式：

.class1 .class2 {styles...}

我可能只是脑子坏掉了。

【问题讨论】：

【解决方案1】：

是的，像这样：

#one #two {
    color: purple;
}

将选择：

<div id="one">
    <div id="two"></div>
</div>

这实际上是没有必要的，因为每个页面只应该有一个同名的 id，所以选择器 #two {} 本身就可以了。

【讨论】：

【解决方案2】：

是的，你可以这样做；这是完全有效的。但这通常也是没有意义的，因为 ID 在页面中必须是唯一的，因此只需选择单个 ID 就足以准确地选择您想要的元素；你不应该需要任何额外的父选择器来限定它，无论是另一个 ID 或一个类或其他任何东西。

我可以看到它的一个用例，其中您有一个 ID 是动态的元素，它出现在页面中的位置，无论出于何种原因，它可能出现在不同的位置，并且您希望它根据位置看起来不同它在它出现的页面中。

为此，拥有#id1 #id2 选择器可能是有效的。但这可能是一个相当少见的用例，即使对于这种用法，类也可能是更适合这项工作的工具。

【讨论】：

Spudley 说得对，它是多余的——一般来说。但是，某些使用
的单页 HTML5 Web 应用程序有时会在桌面上奇怪地显示并显示多个页面元素。在这些情况下，您最终可能会在视口中看到多个具有相同 ID 的元素。

【解决方案3】：

是的

#id1 #id2 {

}

这将针对#id1 内的所有#id2

【讨论】：

【解决方案4】：

是的。您可以在任何您喜欢的选择器之间放置组合器。

【讨论】：

【解决方案5】：

是的，你可以

#id1 #id2 {
    height:200;
}

也类似

  .class1 #id1 {
    height:200;
  }

  .class1 input[type="radio"] {
    border: 1px solid #ccc;
  }

  h1, p{
  }

【讨论】：

【解决方案6】：

是的

#first #second{
 color: #000080;
}

和

<div id="first">
  <p id="second">This is text and will be dark blue</p>
</div>

【讨论】：

【解决方案7】：

动态创建的给定元素可能需要一个 ID 才能支持某些功能。但是，当同一元素存在于另一个元素中时，它可能需要不同于它存在于另一个元素中的属性。因此，在某些情况下，在另一个选择器中使用 ID 选择器的想法可能是有意义的。

【讨论】：