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选择器很容易在#l上对#b进行定位时使用某种样式。是否可以在class div上使用class =“a”来应用某些样式？

Answer 1

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

Answer 2

您可以向id添加额外的<div class="a">并将其设为：

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

...仍然使用:target。

Answer 3

不，CSS 级联（CSS =层叠样式表），它不会上升。您需要明确地将样式应用于父元素。

你最好做@otinanai建议的事情并为你的孩子div添加一个类。 e.g。

<强> 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目的。

css：针对儿童的目标

3 个答案: