css - parent:在具有子alt属性作为内容的伪元素之前

Question

ul包含在单独div元素中的一系列元素不仅需要在其:before伪元素中具有正确的内容,而且还要使粗体标记标题与列表相邻.

此外,如果问题中没有列表div,则不应出现任何内容.这就是为什么我正在寻找CSS作为解决方案的原因,因为如果我对其中的标题进行硬编码div,则会出现没有列表的情况.

我无法预测这个独特的哪个实例div会ul提前 - 我们的应用程序根据用户输入从下拉菜单生成内容,因此如果从未使用过菜单,ul则不会创建a.

我无法使用任何类型的JavaScript进行此标记过程.

这是我想什么想看看:

Foo项目

列表一

• AAAA
• BBBBB
• CCCC

清单二

• defdefdef
• ghighighi

酒吧项目

列表一

• XXX
• YYY

清单二

• zzzzzzz
• aaaabbbbccc

目前我正在尝试使用填充该区域的alt属性.这是希望有一种方法来定义CSS它说"每个包含一个类元素,放置的在元素".uldiv:beforediv.examulattr(alt)div:before

这就是我尝试过的:

<div>
    <b>Far</b>
    <ul class="exam" alt="Foo Items">
        <li>Stuff</li>
        <li>Things</li>
    </ul>
    <b>Near</b>
    <ul class="exam" alt="Foo Items">
        <li>dunno</li>
    </ul>
</div>
<div>
    <b>Far</b>
    <ul class="exam" alt="Bar Items">
        <li>Foo</li>
    </ul>
    <b>Near</b>
    <ul>
        <li>bar</li>
        <li>eggs</li>
    </ul>
</div>

和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/

我意识到这有点令人费解但不幸的是,这是解决应用程序生成其内容的方式的结果.我真的无法控制它,我只能对它创建的元素进行风格化.

提前致谢.

Answer 1

首先，ul元素不能有alt属性。您可以改用自定义data-*属性。

并且在每个中重复相同的数据没有多大意义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;
}

<div data-alt="Foo Items">
  <b>Far</b>
  <ul class="exam">
    <li>Stuff</li>
    <li>Things</li>
  </ul>
  <b>Near</b>
  <ul class="exam">
    <li>dunno</li>
  </ul>
</div>
<div data-alt="Baz Items"></div>
<div data-alt="Bar Items">
  <b>Far</b>
  <ul class="exam">
    <li>Foo</li>
  </ul>
  <b>Near</b>
  <ul>
    <li>bar</li>
    <li>eggs</li>
  </ul>
</div>