Question

单独的ul元素中包含的一系列div元素不仅需要在其:before伪元素中包含正确的内容，还要将粗体标记标题保留在列表旁边。

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

我无法预测这个唯一div的哪些实例会提前ul - 我们的应用程序根据用户输入从下拉菜单生成内容，因此如果菜单永远不会使用时，未创建ul。

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

这就是喜欢的内容：

Foo Items

列出一个

AAAA
BBBBB
CCCC

列表二

defdefdef
ghighighi

酒吧项目

列出一个

XXX
YYY

列表二

zzzzzzz
aaaabbbbccc

目前我正在尝试使用alt的{{1}}属性填充ul区域。希望有一种方法来定义CSS，其中“对于包含div:before类元素的每个div，将.exam的{{1}}放入ul元素“。

这是我尝试过的：

attr(alt)

和CSS一起使用它：

div:before

请在此处查看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>

Answer 2

我认为您正在寻找:empty和:not css选择器。

您可以这样做：

div > .exam:not(:empty):before {
    content:attr(alt);
    font-style:italic;
}
ul {
    margin:0 0 1em 1em;
    padding:0;
}
li {
    margin-left:2em;
}

JSFIDDLE

如果您尝试更改以前兄弟的样式，则无法使用css。您最好通过添加alt属性来添加其他属性。最佳做法是添加前缀为data-的自定义属性。

Answer 3

如果必须这样做，请尝试

div {position:relative;} /*let this be the absolute container*/
div > .exam {position: static;}
div:not(:empty) {padding-top: 30px;} /*for div with generated content, only works for short titles*/
div > .exam:first-of-type:before {
    content:attr(alt);
    font-style:italic;
    position: absolute;
    top: 0;
    margin-left: -1em; /*compensate your ul margin*/
}
ul {
    margin:0 0 1em 1em;
    padding:0;
}
li {
    margin-left:2em;
}

这适用于短片，但也可以调整它以适用于长片。

JSFiddle

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

3 个答案: