title: "选择器" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Block Api - Reference Guides - Repos

选择器

区块选择器是允许区块在生成样式时自定义所用 CSS 选择器的 API。

区块可在三个层级自定义其 CSS 选择器：根层级、功能层级和子功能层级。

根选择器

根选择器是区块的主要 CSS 选择器。

所有区块都需要一个主要 CSS 选择器，以便将其样式声明包含在其下。如果未通过区块选择器 API 提供，则会生成默认选择器，格式为 .wp-block-<name>。

示例

{
    ...
    "selectors": {
        "root": ".my-custom-block-selector"
    }
}

特性选择器

特性选择器与区块支持的样式相关，例如边框、颜色、排版等。

一个区块可能希望将特定特性的样式应用到区块内的不同元素上。例如，在区块包装器上使用颜色样式，但仅将排版样式应用到内部标题上。

示例

{
    ...
    "selectors": {
        "root": ".my-custom-block-selector",
        "color": ".my-custom-block-selector",
        "typography": ".my-custom-block-selector > h2"
    }
}

子功能选择器

这些选择器与区块支持提供的单个样式相关，例如 background-color。

子功能可以在其自身唯一的选择器下生成样式。当一个区块支持子功能无法应用于与支持的其他子功能相同的元素时，这尤其有用。

一个很好的例子是 text-decoration。Web 浏览器对此样式的渲染方式不同，如果将其添加到包装元素，则很难覆盖。通过为 text-decoration 分配自定义选择器，其样式可以仅针对应应用该样式的元素。

Example

{
    ...
    "selectors": {
        "root": ".my-custom-block-selector",
        "color": ".my-custom-block-selector",
        "typography": {
            "root": ".my-custom-block-selector > h2",
            "text-decoration": ".my-custom-block-selector > h2 span"
        }
    }
}

自定义 CSS 选择器

css 选择器控制在通过全局样式生成块的自定义 CSS 规则集时使用哪个选择器。这对应 theme.json 中的 styles.blocks.<block-type>.css 属性。

如果未设置，则使用块的根选择器。

示例

作为字符串：

{
    ...
    "selectors": {
        "root": ".my-custom-block-selector",
        "css": ".my-custom-block-selector > .inner-wrapper"
    }
}

作为包含 root 键的对象：

{
    ...
    "selectors": {
        "root": ".my-custom-block-selector",
        "css": {
            "root": ".my-custom-block-selector > .inner-wrapper"
        }
    }
}

简写方式

您无需为每个子功能指定 CSS 选择器，只需将单个选择器设置为相关功能的字符串值即可。上文示例中展示的 color 功能就采用了这种方法。

回退机制

未针对特定功能配置的选择器将回退到区块的根选择器。同样，如果子功能未设置自定义选择器，它将回退到其父功能的选择器；若父功能选择器也不可用，则进一步回退到区块的根选择器。

为避免为多个子功能重复设置选择器，您可以将通用选择器设为父功能的 root 选择器，并仅为需要区分的子功能定义独特的选择器。

示例

{
    ...
    "selectors": {
        "root": ".my-custom-block-selector",
        "color": {
            "text": ".my-custom-block-selector p"
        },
        "typography": {
            "root": ".my-custom-block-selector > h2",
            "text-decoration": ".my-custom-block-selector > h2 span"
        }
    }
}

在上面的示例中，color.background-color 子特性没有显式设置。由于 color 特性也没有定义 root 选择器，color.background-color 将包含在块的主根选择器 .my-custom-block-selector 下。

对于像 typography.font-size 这样的子特性，如果其父特性存在选择器，它将回退到父特性的选择器，即 .my-custom-block-selector > h2。