CSS 伪类

CSS 伪类 :define 表示已使用 customElementRegistry.define() 方法定义的元素。这包括标准元素以及自定义元素。

语法

:defined {
   /* ... */
}

CSS :define 示例

以下示例演示了 :define 伪类的使用:

<html>
<head>
<style>
   /* 标准元素 p 给定了背景颜色，而自定义元素没有设置背景颜色 */
   p {
      background-color: yellow;
      font-family: 'Courier New', Courier, monospace;
   }

   sample-custom-element {
      color: blue;
   }

   /* 标准和自定义元素都被赋予正常的字体样式，字体粗细为 700，字体系列为幻想 */
   :defined {
      font-style: normal;
      font-weight: 700;
      font-family: fantasy; 
   }
</style>
</head>
<body>
   <h3><u>:defined example</u></h3>  

  <sample-custom-element text="字体颜色为蓝色的自定义元素以及其他样式按照：定义的伪类"></sample-custom-element>

   <p>带有黄色背景的标准 p 元素，字体符合 :define 伪类</p>

   <script>
      customElements.define(
         "sample-custom-element",
         class extends HTMLElement {
         constructor() {
         super();

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

         let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
         }
         },
      );
   </script>
</body>
</html>

在上面的示例中:

  • 标准元素 <p> 被赋予一些样式（背景颜色:黄色；字体系列:'Courier New' 、Courier、等宽字体；）

  • 已声明自定义元素 (sample-custom-element) 并赋予一些样式（颜色:蓝色；）

  • 伪类 :define 应用于已定义的元素，其样式指定为 (font-style: normal; font-weight: 700; font-family: Fantasy;)

  • 输出显示标准元素和自定义元素都采用使用 :define 伪类指定的样式。