Question

我想要完成的任务：

对于嵌套在section元素中的h2标题后直接排序的无序列表，创建一个样式规则，将图像文件flake.png显示为项目符号。

我用来尝试实现此目的:(不成功）

section h2>ul {
    list-style-image: url(flake.png);
}

我没有执行上述操作，而是删除了“section h2＆gt;”从选择器，它使用下面的内容。

ul {
    list-style-image: url(flake.png);
}

显然上面的内容不是说明书中的要求，所以我想知道我做错了什么。

Answer 1

对于嵌套在section元素
中的h2标题后的直接无序列表

section > h2 + ul {
    list-style-image: url(flake.png);
}

PLUS被称为相邻选择器。它将仅选择前一个元素前面的元素。

section > h2 + ul {
  list-style: square;
  color: red;
}

<section>

  <h2>Some Heading</h2>

  <ul>
    <li>Affected</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li>Not affected</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

文章@Tuts + - The 30 CSS Selectors you Must Memorize

list-style-image不显示图像

1 个答案: