::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 |
浏览器兼容性
加载中…