Question

我想指定详细信息的类及其摘要，以便为不同的情况创建不同的行为。

例如，我需要两种情况：屏幕截图和一些文本类别的详细信息。

但以这种方式它不起作用：

/* When spoiler is opened */
details.[open] summary .screenshot {
    background: #AC193D;
    color: #FFF;
}
details[open] summary .category {
    background: #333;
    color: #FFF;
}
/* Add the custom marker in the default state. */
details summary:before .screenshot{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    content: "";
    background-image: url(/images/spoiler.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

details summary:before .category{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    content: "";
    background-repeat: no-repeat;
    background-position: 0 0;
}

HTML：

<details class="category">
<summary>some title</summary>
some text
</details>

<details class="screenshot">
<summary>some title 2</summary>
some text 2
</details>

它们的外观和作用相同： screenshot of result http://pastexen.com/i/nhx2rTS3XF.png

当第一个必须没有图像时，不得在打开时改变颜色。

我做错了什么？

HTML详细信息的类规范

0 个答案: