Question

我正在使用pandoc构建html，并且它构建目录的方式是无序列表。我正在使用css样式表，它以长破折号的形式显示项目符号，这是一个简短的再现，极简的再现：

ul {
  list-style-type: none;
  padding-left: 2em;
  margin-top: -0.2em;
  margin-bottom: -0.2em;
}

li {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

ul>li:before {
  content: "\2014";
  position: absolute;
  margin-left: -1.5em;
}

<div id="TOC" role="doc-toc">
  <h1 id="toctitle">Contents</h1>
  <ul>
    <li>1 Intro</li>
    <li>2 Next
      <ul>
        <li>2.1 Sub</li>
        <li>2.2 MoreSub</li>
      </ul>
    </li>
    <li>3 More</li>
  </ul>
</div>
<h1>Introduction</h1>
Here's another unordered list
<ul>
  <li>A</li>
  <li>B</li>
</ul>

我想做的是仅从目录中无序的列表项（<div id="TOC">下的位）中删除这些破折号，但将其保留以用于其他任何内容无序列表（如示例中的其他无序列表）。也就是说，仅当此项不是ul > li:before div的后代时，我才想应用TOC部分。

:not(#TOC) > ul > li:before {适用于外部列表，但不适用于内部列表，这对我来说很有意义。

:not(#TOC) ul > li:before {似乎完全没有影响。

:not(div.#TOC) ul > li:before {以某种方式禁用了短划线的 all ，这是我不理解的，因为我希望第二个无序列表与此匹配。

有什么方法可以做我想要的吗？

Answer 1

:not(...)不起作用，因为您的非TOC <ul>元素没有非<body>的父对象。您可以定位<ul>元素的直接后代元素<body>，如下所示：

body > ul > li::before {
  content: "\2014";
  position: absolute;
  margin-left: -1.5em;
}

ul {
  list-style-type: none;
  padding-left: 2em;
  margin-top: -0.2em;
  margin-bottom: -0.2em;
}

li {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

body > ul > li::before {
  content: "\2014";
  position: absolute;
  margin-left: -1.5em;
}

<div id="TOC" role="doc-toc">
  <h1 id="toctitle">Contents</h1>
  <ul>
    <li>1 Intro</li>
    <li>2 Next
      <ul>
        <li>2.1 Sub</li>
        <li>2.2 MoreSub</li>
      </ul>
    </li>
    <li>3 More</li>
  </ul>
</div>
<h1>Introduction</h1>
Here's another unordered list
<ul>
  <li>A</li>
  <li>B</li>
</ul>

一种更灵活的替代方法可能是明确指定您要隐藏#TOC的破折号：

ul>li:before {
  content: "\2014";
  position: absolute;
  margin-left: -1.5em;
}

#TOC ul>li:before { display: none; }

ul {
  list-style-type: none;
  padding-left: 2em;
  margin-top: -0.2em;
  margin-bottom: -0.2em;
}

li {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

ul>li:before {
  content: "\2014";
  position: absolute;
  margin-left: -1.5em;
}

#TOC ul>li:before { display: none; }

<div id="TOC" role="doc-toc">
  <h1 id="toctitle">Contents</h1>
  <ul>
    <li>1 Intro</li>
    <li>2 Next
      <ul>
        <li>2.1 Sub</li>
        <li>2.2 MoreSub</li>
      </ul>
    </li>
    <li>3 More</li>
  </ul>
</div>
<h1>Introduction</h1>
Here's another unordered list
<ul>
  <li>A</li>
  <li>B</li>
</ul>

CSS选择器仅在不具有特定ID的祖先div时启用

1 个答案: