position-visibility 属性提供了一些条件来隐藏 锚点定位元素 于视口之外。
.target {
position: absolute;
position-anchor: --my-anchor;
position-visibility: no-overflow;
}position-visibility 属性对普通元素没有任何影响。这是因为它属于…
position-visibility 属性提供了一些条件来隐藏 锚点定位元素 于视口之外。
.target {
position: absolute;
position-anchor: --my-anchor;
position-visibility: no-overflow;
}position-visibility 属性对普通元素没有任何影响。这是因为它属于 CSS 锚点定位模块的一部分，该模块是一组许多功能的集合，这些功能共同作用于将一个元素（我们可能称之为“目标”）定位到另一个元素（称为“锚点”）。
:valid 是一个伪类选择器，它允许对有效的表单元素进行样式设置。:valid 可以添加到任何表单元素中，例如 <form、<fieldset 或 <input，以根据元素的有效性或…增强样式。]]>:valid 是一个伪类选择器，它允许对有效的表单元素进行样式设置。:valid 可以添加到任何表单元素中，例如 <form>、<fieldset> 或 <input>，以根据元素的有效性或包含的子元素的有效性增强样式。
form:valid {
outline: 3px dashed green;
}function csstricks_toc($post=false) { global $post; $blocks = parse_blocks( $post-post_content ); $headings = array(); foreach( $blocks as $block ) { if( 'core/heading' === $block['blockName'] ) { if( false !== strpos( $block['innerHTML'], 'id=' ) ) { $element = 'h' . $block['attrs']['level']; …]]>function csstricks_toc($post=false) { global $post; $blocks = parse_blocks( $post->post_content ); $headings = array(); foreach( $blocks as $block ) { if( 'core/heading' === $block['blockName'] ) { if( false !== strpos( $block['innerHTML'], 'id=' ) ) { $element = 'h' . $block['attrs']['level']; $title = wp_strip_all_tags( $block['innerHTML'] ); } else { $title = wp_strip_all_tags( $block['innerHTML'] ); } $headings[] = $title; } } if( !empty( $headings ) ) { echo '<ol class="toc">'; foreach( $headings as $heading ) echo '<li class="toc-link"><a href="#aa-' . sanitize_title_with_dashes($heading) . '">' . $heading . '</a></li>'; echo '</ol>'; } }
这部分的核心内容来自 The SEO Guidebox。原始代码片段解析帖子内容中的所有区块，查找标题级别，去除其 HTML，然后以有序列表的形式输出标题文本。
我真的很希望输出的文本能够锚定到帖子标题。我们在 CSS-Tricks 上 已经使用了一个插件，该插件可以动态地在标题中插入 ID，所以我不需要这部分内容并将其删除。然后，我在列表项中添加了一个锚元素，该元素使用 sanitize_title_with_dashes() 函数将 $heading 转换为用短划线分隔的小写字符串。
唯一的问题是，我们用来插入 ID 的插件会在其生成的每个 ID 前添加 aa-。因此，我将其插入循环中，现在我们在这个网站上有了目录组件。我们通过使用一个 ACF 字段进一步完善了它，该字段允许我们有条件地插入目录。
position-try-order 属性设置目标元素尝试使用的位置的顺序，以便围绕锚元素显示自身。您可以将其视为为目标元素设置首选位置，并提供其他选项…]]>position-try-order 属性设置目标元素尝试使用的位置的顺序，以便围绕锚元素显示自身。您可以将其视为为目标元素设置首选位置，并在理想位置缺乏显示空间的情况下提供其他选项。
例如，我们可以告诉目标元素使用具有most-width选项的位置。
position-try-fallbacks 属性接受“目标”元素相对于“锚”元素进行position定位的不同选项列表，通过尝试一个声明的逗号分隔选项列表。如果第一个选项没有足够的可用空间…]]>position-try-fallbacks 属性接受“目标”元素相对于“锚”元素进行position定位的不同选项列表，通过尝试一个声明的逗号分隔选项列表。如果第一个选项没有足够的可用空间来显示目标元素，则它尝试下一个选项，依此类推，这与在font-family中设置备用字体非常相似。
（更多…）]]>