html - 从父选择器获取属性是 CSS 使用 content:attr();

Question

嘿，我正在尝试将 <section> 标记的“标题”属性放在 <h3> 标记内，该标记位于 <section> 标记的正下方和内部。以下工作

   <section title="General Information">
       <h3>General Information</h3>
       ....
   </section>

我想做的不是在 <h3> 标记内重复“一般信息”，而是使用 CSS 内容和 attr() 来获取 <section> 标记中的标题属性内的信息并将其放在 <h3 > 标签。

   <section title="General Information">
       <h3></h3>
       ....
   </section>

   section h3:after 
   {
       content:attr(title);
   }

正如预期的那样，在 <h3> 标记而不是 <section> 标记内查找“title”属性。有什么方法可以实现我想要实现的目标吗？我正在努力完成正确的做事方式吗？我知道我可以完全跳过 <h3> 标记并格式化 <section> 标记以显示 'title' 属性中的任何文本，就像 <h3> 标记一样。

Answer 1

该attr()函数只能从生成内容的元素中获取属性。您将无法获取section元素title，因为它不是生成内容的元素。

正如 ScottS 所提到的，你真的应该避免有一个空的标题元素，因为那时根本没有任何意义。您最好的选择是要么省略该title属性（真的需要它吗？），要么保留重复的内容。