?? (?? ??)? ?? ??-?????. ??? ???? ?? ??? ?? ? ????.

``` { "??": 2, "??": {}, // ... "???": { // ... "??": { "??": { "??": { "??": "0" }, "??": { "??": "var (-WP-- ?? ??-?? ????)", "???": "var (-WP-- ??? ??-??)" }, ": ??": { "??": { "??": "var (-WP-- PreSet-Color-??)", "???": "var (-WP-- ??? ??-???)" } }, ":????": { "??": { "??": "var (-WP-- PreSet-Color-??)", "???": "var (-WP-- ??? ??-???)" } }, ":????": { "??": { "??": "var (-WP-- ??? ??-?? ?)", "???": "var (-WP-- ??? ??-???)" } } }, "H1": { "??????": {} }, // ... "??": { "??????": { "Fontweight": "400", "LineHeight": "1.4" } }, "??": { "??": { "???": "var (-WP-- ??? ??-??)" }, ": ??": { "??????": { "TextDecoration": "??" } }, ":????": { "??????": { "TextDecoration": "Underline Dashed" } }, ":????": { "??": { "???": "var (-WP-- ??? ??-????)" }, "??????": { "TextDecoration": "??" } }, "??????": { "TextDecoration": "??" } } }, // ... }, "TemplateParts": {} } <.>

<code>{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}</code>

{ "??": 2, // ... "???": { // ??? ?? ??? "??": {}, // ?? ?? ??? "??": { "??/??": { "??": { "??": { "??": { "??": "var (-WP-- ??? ??-4 ??)", "???": "var (-WP-- ??? ??-???)" } } }, // ... } } } } <.>

<code>
所有按鈕都在全局級(jí)別（`styles.elements.button`）設(shè)置樣式。

我們也可以在DevTools中確認(rèn)這一點(diǎn)。請(qǐng)注意，名為`.wp-element-button`的類是選擇器。相同的類也用于設(shè)置交互式狀態(tài)。

同樣，所有這些樣式都在全局級(jí)別發(fā)生，來自`theme.json`。每當(dāng)我們使用按鈕時(shí)，它都將具有相同的背景，因?yàn)樗鼈児蚕硐嗤倪x擇器，并且沒有其他樣式規(guī)則覆蓋它。

順便說一句，WordPress 6.1添加了對(duì)使用`theme.json`中的偽類（包括`:hover`、`:focus`和`:active`）或全局樣式UI設(shè)置某些元素（如按鈕和鏈接）的交互式狀態(tài)樣式的支持。Automattic工程師Dave Smith在一個(gè)YouTube視頻中演示了此功能。

我們可以在`theme.json`中（最好在子主題中，因?yàn)槲覀兪褂玫氖悄J(rèn)WordPress主題）或在站點(diǎn)編輯器中的全局樣式設(shè)置中覆蓋按鈕的背景顏色（不需要子主題，因?yàn)樗恍枰a更改）。

但是，按鈕將同時(shí)更改。如果我們想在按鈕是特定塊的一部分時(shí)覆蓋背景顏色怎么辦？這就是塊級(jí)樣式發(fā)揮作用的地方。

#### 元素的塊級(jí)樣式

為了了解如何在塊級(jí)別使用和自定義樣式，讓我們更改包含在搜索塊中的按鈕的背景顏色。請(qǐng)記住，有一個(gè)按鈕塊，但我們正在做的是在搜索塊的塊級(jí)別覆蓋背景顏色。這樣，我們只在那里應(yīng)用新顏色，而不是將其全局應(yīng)用于所有按鈕。

為此，我們?cè)赻theme.json`的`styles.blocks`對(duì)象上定義樣式。沒錯(cuò)，如果我們?cè)赻styles.elements`上定義所有按鈕的全局樣式，我們可以在`styles.block`上定義按鈕元素的塊特定樣式，這遵循類似的結(jié)構(gòu)：
</code>

<code>
看到了嗎？我在`styles.blocks.core/search.elements.button`上設(shè)置了背景和文本屬性，并使用了WordPress中預(yù)設(shè)的兩個(gè)CSS變量。

結(jié)果？搜索按鈕現(xiàn)在是紅色的（`--wp--preset--color--quaternary`），默認(rèn)按鈕塊保留其亮綠色背景。

我們也可以在DevTools中看到更改。

如果我們想設(shè)置包含在其他塊中的按鈕的樣式，也是如此。按鈕只是一個(gè)例子，所以讓我們?cè)倏匆粋€(gè)。

### 示例：在每個(gè)級(jí)別設(shè)置標(biāo)題樣式

讓我們用一個(gè)例子來鞏固所有這些信息。這次，我們將：

- 全局設(shè)置所有標(biāo)題的樣式
- 設(shè)置所有二級(jí)標(biāo)題元素的樣式
- 設(shè)置查詢循環(huán)塊中二級(jí)標(biāo)題元素的樣式

首先，讓我們從`theme.json`的基本結(jié)構(gòu)開始：
</code>

{ "??": 2, "???": { // ??? ?? ??? "??": { "??": { "??": "var (-WP-- ??? ??-???)" }, "H2": { "??": "var (-WP-- ??? ??-????)", "??????": { "fontsize": "??? (2.625rem, calc (2.625rem ((1VW -0.48REM) * 8.4135)), 3.25REM)" " } } }, // ?? ?? ??? "??": {} } } <.>

<code>
這為我們的全局和塊級(jí)樣式建立了輪廓。

#### 全局設(shè)置所有標(biāo)題的樣式

讓我們將`headings`對(duì)象添加到我們的全局樣式并應(yīng)用一些樣式：
</code>