Question

我有一些CSS可以在细节元素中的摘要元素旁边标记标记。 CSS本身工作正常。但是，如果我在第一个中嵌入另一个details元素（创建父详细信息元素和子详细信息元素），则我的标记内容不会正确切换。一旦打开父项，即使该元素尚未打开，子标记也会显示为打开。

我不确定在这种情况下是否有适当的选择器将子详细信息元素与父项隔离，因为子项未打开且CSS中没有[闭合]语法我知道。看起来比嵌套细节元素时，一旦父母打开，所有孩子也都“打开”。有没有人遇到过这样的事情？

summary {
    outline: none;
    font-size: 1.15em;
}

summary::-webkit-details-marker {
    display: none
}

summary:after {
    background: #da291c;
    border-color: #da291c;
    border-radius: 15px;
    content: "+";
    color: #fff;
    float: left;
    font-size: 1em;
    font-weight: bold;
    margin: -2px 10px 0 0;
    padding: 1px 0 3px 0;
    text-align: center;
    width: 30px;
}

details[open] summary:after {
    content: "-";
}

<details>
  <summary>Parent</summary>
  <p>
    Parent Holder Text
  </p>
  <details>
    <summary>Child</summary>
    <p>
      Child Holder Text
    </p>
  </details>
</details>

Answer 1

您的CSS正在将content: "-";应用于summary:after中的所有details[open]个元素，因此它也会对儿童进行级联。尝试将其仅应用于使用child combinator（>）

的父元素的直接子元素

details[open] > summary:after {
    content: "-";
}

Answer 2

details[open] > summary::marker {
    display: none;
    content: "";
}

如果您感兴趣的是隐藏名为summary的元素（表示为箭头），则必须在使用speudoselector“ marker”时调用它，您必须指定您不希望以任何方式放置它。因此，由于“ content”属性具有绘制文本图形的功能，因此您不应指定任何内容，而应将其保留为空（content：“”），代码应为=

在这里，我将显示差异：

Content-yes

Content-none

Answer 3

details summary::-webkit-details-marker,
details summary::marker {
 display: none; 
 content: "";
}

如果它不起作用，请尝试此操作（:: 铬的标记和内容）

HTML详细信息/摘要元素标记样式

3 个答案: