使用CSS3属性函数的子项中父项的属性值

我想在其（嵌套）子项之一上设置父元素的值data-index。预期结果：字符串“index”应出现在h2.heading的周围。使用CSS3属性函数的子项中父项的属性值

标记：

<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

来源

2017-02-03 montrealist

的问题是，我不认为你可以从CSS3中元素的父元素中提取'attr（data-index）'。你必须在'div.foo> div'元素中包含'data-index'属性来封装头部，以便在其上放置一个':: after'伪类。 – forrestmid

@forrestmid我怀疑那个;有没有我能做的任何阅读？ – montrealist

是的，[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/attr）对此有定义。具体而言，“attr（）CSS函数用于检索**选定元素**的属性值，并在样式表中使用它。”我做了一些研究，但没能找到任何可以用子元素完成的事情。 – forrestmid

你可以使用这个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伪元素。

我想这就是你要找的。

来源

2017-02-04 00:12:44

不是 - 只是把'data-index'的值放在'div.foo'之前 - 我在标题中需要它。 – montrealist

因为您很可能必须将数据索引属性添加到h2元素。没有看到它的方式。 –

这里是更新的代码笔http://codepen.io/anon/pen/ggzEeo –

更新

一种解决方法可能是直接在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>

来源

2017-02-04 00:54:03

变量的方法是否会在最新的Chrome浏览器（只有浏览器，我需要内部支持）工作？它在[caniuse.com]（http://caniuse.com/#feat=css-variables）中被列为支持。 – montrealist

@montrealist是的，它可以与最新的Chrome一起使用。这里是更新的笔：http://codepen.io/gpetrioli/pen/KaedNx –

使用CSS3属性函数的子项中父项的属性值

回答

相关问题