element:has(selectorA, selectorB, …) {
  /* 指定的样式 */
}

[[module css]]
/* 当一个类名为kitty的引用块(blockquote)内含有字符注释(ruby)时，其背景色会被设置为带有透明度的橙色。 */
.blockquote.kitty:has(span.ruby) {
  background-color: #fba41440;
}
[[/module]]

[[div class="blockquote kitty"]]
我是小猫。
[[/div]]

[[div class="blockquote kitty"]]
我是[[span class="ruby"]]长长长猫[[span class="rt"]]SCP-CN-20210401-J[[/span]][[/span]]。
[[/div]]

[[module css]]
/* 当span.a与span.b连续时，样式修改作用于span.b */
span.a + span.b {
  color: green;
}
/* 当span.a与span.b连续时，样式修改作用于span.a */
span.a:has(+ span.b) {
  color: red;
}
[[/module]]

[[div class="blockquote"]]
[[span class="a"]]我没有颜色[[/span]]

[[span class="b"]]我也没有颜色[[/span]]

[[span class="a"]]这段文字是红色的[[/span]][[span class="b"]]而这段是绿色的[[/span]]
[[/div]]

[[collapsible show="+ 展开" hide="- 隐藏"]]
展开后展示的内容。
[[/collapsible]]

[[module css]]
/* 隐藏用于标识触发的span元素 */
p:has(span.trigger) { display: none; }
/* .spec类默认隐藏 */
.spec { display: none; }
/* 在含有对应触发的折叠打开时，.spec类展示 */
:root:has(.collapsible-block-unfolded[style=""] span.trigger.n1, .collapsible-block-unfolded[style="display: block;"] span.trigger.n1) div.spec.n1 {
  display: block;
}
:root:has(.collapsible-block-unfolded[style=""] span.trigger.n1, .collapsible-block-unfolded[style="display: block;"] span.trigger.n1) span.spec.n1 {
  display: inline;
}
/* 在含有对应触发的折叠打开时，.anti类隐藏 */
:root:has(.collapsible-block-unfolded[style=""] span.trigger.n1, .collapsible-block-unfolded[style="display: block;"] span.trigger.n1) .anti.n1 {
  display: none;
}

[[/module]]

[[collapsible show="▶" hide="▷"]]
[[span class="trigger n1"]]@@ @@[[/span]]
[[/collapsible]]

[[div class="spec n1"]]
这里有一整段内容
[[/div]]

你的[[span class="anti n1"]]小猫[[/span]][[span class="spec n1"]]长长长猫[[/span]]正在突击！

:root:has(.collapsible-block-unfolded[style=""] span.trigger.n1, .collapsible-block-unfolded[style="display: block;"] span.trigger.n1) .element {
  /* 当含有span.trigger.n1的折叠/切换式按钮被开启时，为.element元素设置的样式。 */
}

[[module css]]
/* 隐藏用于标识触发的span元素 */
p:has(span.trigger) { display: none; }
/* 在含有对应触发的折叠打开时，将整个页面中的blockquote背景色调整为(73, 117, 104)。 */
:root:has(.collapsible-block-unfolded[style=""] span.trigger.n2, .collapsible-block-unfolded[style="display: block;"] span.trigger.n2) :is(div.blockquote, blockquote) {
  background-color: rgb(73, 117, 104);
}
[[/module]]

[[collapsible show="切换为亮色引用框" hide="切换为暗色引用框"]]
[[span class="trigger n2"]]@@ @@[[/span]]
[[/collapsible]]

[[module css]]
/* 初始情况下，.book类下的第3个及以后的子元素被隐藏，故只显示第一页与未展开的第一个折叠（右箭头）。 */
.book.n1 > div:nth-of-type(n+3) { display: none; }
/* 按下第一个按钮后，隐藏第1个及以前的子元素，展示第2~4个子元素，隐藏第5个及以后的子元素。 */
/* 第2~4个子元素分别为展开后的第一个折叠（左箭头），第二页与未展开的第二个折叠（右箭头）。 */
.book.n1:has(.collapsible-block-unfolded[style=""] span.page1, .collapsible-block-unfolded[style="display: block;"] span.page1) > div:nth-of-type(n):nth-of-type(-n+1) {
  display: none;
}
.book.n1:has(.collapsible-block-unfolded[style=""] span.page1, .collapsible-block-unfolded[style="display: block;"] span.page1) > div:nth-of-type(n+2):nth-of-type(-n+4) {
  display: block;
}
.book.n1:has(.collapsible-block-unfolded[style=""] span.page1, .collapsible-block-unfolded[style="display: block;"] span.page1) > div:nth-of-type(n+5) {
  display: none;
}
/* 按下第2个按钮后，隐藏第3个及以前的子元素，展示第4~6个子元素，隐藏第7个及以后的子元素。 */
.book.n1:has(.collapsible-block-unfolded[style=""] span.page2, .collapsible-block-unfolded[style="display: block;"] span.page2) > div:nth-of-type(n):nth-of-type(-n+3) {
  display: none;
}
.book.n1:has(.collapsible-block-unfolded[style=""] span.page2, .collapsible-block-unfolded[style="display: block;"] span.page2) > div:nth-of-type(n+4):nth-of-type(-n+6) {
  display: block;
}
.book.n1:has(.collapsible-block-unfolded[style=""] span.page2, .collapsible-block-unfolded[style="display: block;"] span.page2) > div:nth-of-type(n+6) {
  display: none;
}
[[/module]]

[[div class="blockquote wide book n1" style="height: 20em;"]]
[[div class="book-content"]]
这是第一页，是//div.book//下的第1个子元素。
[[/div]]
[[div class="paging"]]
[[collapsible show=" " hide=" "]]
[[span class="page1"]]@@ @@[[/span]]
[[/collapsible]] [!-- 这个按钮是第2个子元素 --]
[[/div]]
[[div class="book-content"]]
这是第二页，是//div.book//下的第3个子元素。
[[/div]]
[[div class="paging"]]
[[collapsible show=" " hide=" "]]
[[span class="page2"]]@@ @@[[/span]]
[[/collapsible]] [!-- 这个按钮是第4个子元素 --]
[[/div]]
[[div class="book-content"]]
这是第三页，是//div.book//下的第5个子元素。
[[/div]]
[[/div]]

[[module css]]
/* 这是一个大白块 */
.white {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  display: none;
}
/* 带有opacity参数的折叠内容中的大白块将会展示。 */
.collapsible-block-content[style*="opacity"] .white{
  display: block;
}
[[/module]]

[[collapsible show="点击此处屏幕将会短暂变白" hide="关闭"]]
[[div class="white"]]
[[/div]]
[[/collapsible]]

[[module css]]
/* 默认隐藏的大白块。 */
.white { display: none; }
/* 打开折叠的一瞬间，大白块将会显示。 */
:root:has(.collapsible-block-content[style*="opacity"] span.trigger.n3) .white{
  display: block;
}
[[/module]]

[[collapsible show="点击此处屏幕将会短暂变白" hide="关闭"]]
[[span class="trigger n3"]]@@ @@[[/span]]
[[/collapsible]]

[[div class="white"]]
[[/div]]

[[module css]]
/* 一般情况下隐藏警告。 */
.has-warning {display: none;}
/* 如果不支持涉及:has()的选择器，就展示警告部分。 */
@supports not selector(:has(.collapsible-block-unfolded[style="display: block;"] span.trigger)) {
  .has-warning {display: block;}
  /* 如果你需要做其余的兼容性适配，放在这里。 */
}
[[/module]]

[[div class="error-block has-warning"]]
如果您看到了这段文字，那么您使用的浏览器很可能并不支持本文章的全部展示效果。

如果您希望体验完整的文章内容，请换用电脑端或升级到浏览器的最新版本后再进行阅读。
[[/div]]

[[module css]]
#page-content {display: none;}
#page-content:has(div.n0000000),
#page-content:has(div.n0000001) {
  display: block;
}
[[/module]]

[[module Listusers users="."]]
[[div class="n%%number%%"]]
@@ @@
[[/div]]
[[/module]]