css - css：以儿童为目标

Question

假设我们有这个 html

<div class="a">
   <div>...</div>
   ...
   <div id="b">xyz</div>
</div>


<div class="a">
   <div>...</div>
   ...
   <div id="c">abc</div>
</div>

使用 css :target 选择器在 url 中定位 #b 时应用一些样式很容易。是否可以在 class="a" 的父 div 上应用一些样式？

Answer 1

不，因为您需要一个 CSS 父选择器。CSS2和CSS3中没有为此指定任何内容。CSS4 确实有（有点）使用该符号的父选择器（称为主题选择器）!，但没有浏览器支持它（目前）。

Answer 2

您可以添加一个额外id的<div class="a">内容并制作它：

<div class="a" id="abc">

...并且仍然使用:target.

Answer 3

不，CSS级联（CSS = Cascading Style Sheets），它不会上升。您需要将样式显式应用于父元素。

您最好执行@otinanai 建议的操作，并为您的子 div 添加一个类。例如

HTML

<div class="a">
   <div>...</div>
   ...
   <div class="aItem" id="b">xyz</div>
</div>

<div class="a">
   <div>...</div>
   ...
   <div class="aItem" id="c">abc</div>
</div>

CSS

.a {
    border: 1px solid #000;
}
.aItem {
    color: #999;
}

因此，您将使用类来一致地设置元素的样式。否则，您将不得不为 D、E、FG 到 Z 编写 CSS，并且仅将 ID 用于预订标记/URL 目的。