:defined

Baseline 广泛可用

此功能已得到广泛应用，可以在许多设备和浏览器版本上使用。它自 2020 年 1 月.

报告反馈

:defined CSS 伪类 表示任何已定义的元素。这包括浏览器内置的任何标准元素，以及已成功定义的自定义元素（即使用 CustomElementRegistry.define() 方法）。
/* Selects any defined element */
:defined {
  font-style: italic;
}

/* Selects any instance of a specific custom element */
simple-custom:defined {
  display: block;
}

语法

:defined CSS 伪类 表示任何已定义的元素。这包括浏览器内置的任何标准元素，以及已成功定义的自定义元素（即使用 CustomElementRegistry.define() 方法）。
:defined {
  /* ... */
}

示例

css

隐藏元素直到它们被定义

以下代码片段取自我们的 defined-pseudo-class 演示（也可以在线查看）。

在这个演示中，我们定义了一个非常简单的自定义元素
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);

js

然后将此元素的副本插入文档中，以及一个标准的 <p>
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>

html

:defined CSS 伪类 表示任何已定义的元素。这包括浏览器内置的任何标准元素，以及已成功定义的自定义元素（即使用 CustomElementRegistry.define() 方法）。
/* Give the two elements distinctive backgrounds */
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

/* Both the custom and the built-in element are given italic text */
:defined {
  font-style: italic;
}

在 CSS 中，我们首先包含以下规则

:defined CSS 伪类 表示任何已定义的元素。这包括浏览器内置的任何标准元素，以及已成功定义的自定义元素（即使用 CustomElementRegistry.define() 方法）。
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}

然后提供以下两个规则来隐藏任何未定义的自定义元素实例，并将定义的实例显示为块级元素

规范

如果您有一个复杂的自定义元素，加载到页面中需要一段时间 - 您可能希望隐藏元素的实例，直到定义完成，这样您就不会在页面上出现丑陋的未样式元素的闪烁
规范
# HTML 标准

浏览器兼容性

selector-defined

另请参阅