::details-content
試一試
details[open]::details-content {
color: dodgerblue;
padding: 0.5em;
border: thin solid grey;
}
<details open>
<summary>Example summary</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>
Architecto cupiditate ea optio modi quas sequi, esse libero asperiores
debitis eveniet commodi hic ad.
</p>
</details>
語法
css
selector::details-content
示例
基本示例
在此示例中，::details-content 偽元素用於設定 <details> 元素內容的 background-color。
HTML
html
<details>
<summary>Click me</summary>
<p>Here is some content</p>
</details>
CSS
css
details::details-content {
background-color: #a29bfe;
}
結果
過渡示例
在此示例中，::details-content 偽元素用於設定 <details> 元素內容的 transition，使其在展開時平滑淡入視野，摺疊時再次淡出。為了實現這一點，在 transition 簡寫屬性中指定了兩個獨立的過渡
opacity屬性在600ms內進行基本過渡，以建立淡入/淡出效果。content-visibility屬性（當<details>內容展開/摺疊時，它在hidden和visible之間切換）也進行了基本600ms的過渡，但指定了transition-behavior值allow-discrete。這使得瀏覽器選擇在content-visibility上啟動過渡，其動畫行為是離散的。效果是內容在整個過渡期間都是可見的，允許看到其他過渡。如果未包含此過渡，則當<details>內容摺疊時，內容將立即消失——您將看不到平滑的淡出效果。
HTML
html
<details>
<summary>Click me</summary>
<p>Here is some content</p>
</details>
CSS
css
details::details-content {
opacity: 0;
transition:
opacity 600ms,
content-visibility 600ms allow-discrete;
}
details[open]::details-content {
opacity: 1;
}
結果
規範
| 規範 |
|---|
| CSS 偽元素模組 Level 4 # details-content-pseudo |
瀏覽器相容性
載入中…