css：以儿童为目标答案

【问题标题】：css :target on childrencss：以儿童为目标
【发布时间】：2013-03-13 10:29:07
【问题描述】：

假设我们有这个 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 上应用一些样式？

【问题讨论】：

"#b 在 url 中定位时的样式" 你是什么意思？
不，原因很简单，there is no way to select the parent yet.
你可以用jQuery，但问题不清楚
@Bigood 我的意思是#b:target {...}
@Bigood：如果你不明白 :target 做了什么，w3.org/TR/css3-selectors/#target-pseudo

标签： css parent target

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

...仍然使用:target。

【讨论】：

是的，但这会导致 URL 片段指向这个元素而不是另一个元素，如果孩子必须有 ID 或其他一些行为可能会受到影响，这可能是可取的，也可能不是可取的，例如滚动或脚本。
只有当 URL 片段是 #abc 而不是 #b 时才有效。至少它确实提供了能够设置 #abc:target #b 样式的好处，但它会影响 URL（可能还有页面上指向它的任何链接）。

【解决方案3】：

不，CSS cascades（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、F G 到 Z 编写 CSS，并且仅将 ID 用于预订标记/URL 目的。

【讨论】：