包含在单独div元素中的一系列ul元素不仅需要在其前面的伪元素中具有正确的内容,而且还要使粗体标记标题与列表相邻.
此外,如果有问题的div中没有列表,则不应出现任何内容.这就是为什么我在寻找CSS作为解决方案的原因,因为如果我在div中对标题进行硬编码,那么如果没有列表存在则会出现.
我无法预测这个唯一div的哪些实例会提前提供ul – 我们的应用程序根据用户输入从下拉菜单生成内容,因此如果从未使用过菜单,则不会创建ul.
我无法使用任何类型的JavaScript进行此标记过程.
这是我想看到的：
Foo项目
列表一
> aaaa
> bbbbb
> cccc
清单二
> defdefdef
> ghighighi
酒吧项目
列表一
> xxx
> yyy
清单二
> zzzzzzz
> aaaabbbbccc
目前我正在尝试使用ul的alt属性来填充div：before area.希望有一种方法来定义CSS,它表示“对于包含.exam类元素的每个div,将ul的attr(alt)放在div：before元素之前”.
这就是我尝试过的：
和CSS一起去：
div > .exam:first-of-type:before {
content:attr(alt);
font-style:italic;
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
请在这里查看jsfiddle链接 – https://jsfiddle.net/f6gwyvuu/
我意识到这有点令人费解但不幸的是,这是解决应用程序生成其内容的方式的结果.我真的无法控制它,我只能对它创建的元素进行风格化.
提前致谢.
最佳答案
首先,ul元素不能具有alt属性.您可以使用自定义数据 – *属性.
并且在每个ul中重复相同的数据没有多大意义.相反,只将它添加到div.
然后,你可以使用
div:not(:empty):before {
content: attr(data-alt);
display: block;
}
div:not(:empty):before {
content: attr(data-alt);
display: block;
font-style: italic;
}
ul {
margin: 0 1em;
padding: 0;
}
li {
margin-left: 2em;
}
原文链接：https://www.f2er.com/css/427213.html