CSS:针对儿童

  • 本文关键字:CSS css parent target
  • 更新时间 :
  • 英文 :


假设我们有这个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添加一些样式。是否有可能在父div上应用一些样式class="a" ?

不,因为你需要一个CSS父选择器。CSS2和CSS3中没有为此指定任何内容。CSS4确实有(某种程度上)使用!符号的父选择器(称为主题选择器),但目前还没有浏览器支持它。

您可以在您的<div class="a">中添加额外的id,并使其:

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

…仍然使用:target

不,CSS 级联 (CSS =级联样式表),它不会上升。你需要显式地对父元素应用样式。

你最好像@otinanai建议的那样做,并在你的孩子div中添加一个类。例如

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

相关内容

  • 没有找到相关文章

最新更新