css

Question

包含在单独 div 元素中的一系列 ul 元素不仅需要在它们的 :before 伪元素中包含正确的内容，而且还需要保持粗体标记标题与相邻名单。

此外，当所讨论的 div 中没有任何列表时，任何内容都不应出现。这就是为什么我正在寻找 CSS 作为解决方案的原因，因为如果我 hard-code div 中的标题，如果没有列表，它就会出现。

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

我无法使用 JavaScript 任何类型的标签过程。

这是我喜欢看到的：

Foo 项目

列表一

aaaa
bbbbb
cccc

清单二

defdefdef
高贵

栏项目

列表一

xxx
yyy

清单二

zzzzzzz
aaaabbbbccc

目前我正在尝试使用ul的alt属性填充div:before区域。这是希望有一种方法可以定义 CSS 表示 "for each div that contains an .exam class element, place the ul's attr(alt) in the div:before element".

这是我试过的：

<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 link - https://jsfiddle.net/f6gwyvuu/

我知道这有点复杂，但不幸的是，这是绕过应用程序生成其内容的方式的结果。我真的无法控制它，我只能将它创建的元素风格化。

提前致谢。

Answer 1

我认为您正在寻找 :empty and :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 2

如果您必须这样做，请尝试

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

Answer 3

首先，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>

css - parent :before 以 child alt 属性为内容的伪元素

css - parent :before pseudoelement with child alt attribute as content

css-selectors

pseudo-element