使用CSS3 attr函数使用子节点中父节点的属性值

Question

我想data-index在其(嵌套)子节点之一上设置父元素的值.期望的结果:字符串"index"应该出现在h2.heading.

标记:

<div class="foo" data-index="index">
    <div>
        <h2 class="heading"><span>title</span></h2>
    </div>
</div>

CSS(第一条data-index规则有效 - 但不是在正确的地方):

div.foo[data-index] .heading span {
    display: none;
}

div.foo[data-index]::after { 
    content: attr(data-index);
    color: green;
}

div.foo[data-index] .heading::after { 
    content: attr(data-index);
    color: red;
    border: 1px solid red;
}

http://codepen.io/anon/pen/jyxdoz

Answer 1

更新

解决方法可能是直接在html元素上设置CSS变量并使用它.

div.foo[data-index] .heading span {
    display: none;
}

div.foo[data-index] .heading::after { 
    content: var(--index);
    color: red;
    border: 1px solid red;
}

<div class="foo" style="--index:'test';" data-index>
  <div>
    <h2 class="heading"><span>title</span></h2>
  </div>
</div>

原版的

它目前无法完成(如上所述attr仅适用于当前元素).

将来,attr()除了可以用于属性之外content,结合css变量你可以这样做

div.foo[data-index] .heading span {
  display: none;
}
div.foo[data-index] {
  --index: attr(data-index);
}
div.foo[data-index] .heading::after {
  content: var(--index);
  color: red;
  border: 1px solid red;
}

<div class="foo" data-index="index">
  <div>
    <h2 class="heading"><span>title</span></h2>
  </div>
</div>

Answer 2

你可以使用这个CSS。

div.foo[data-index]::after, div.foo[data-index]::before { 
    content: attr(data-index);
    color: green;
}

div.foo[data-index] .heading::after { 
    content: attr(data-index);
    border: 1px solid red;
}

请注意伪元素的使用:before。

我想这就是你正在寻找的。