在此页

• 特性
• 方法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

CSSPseudoElement interface represents a pseudo-element that may be the target of an event or animated using the Web 动画 API . Instances of this interface may be obtained by calling Element.pseudo() .

特性

CSSPseudoElement.element 只读

Returns the originating/parent 元素 of the pseudo-element.

CSSPseudoElement.type 只读

Returns the pseudo-element selector as a CSSOMString .

方法

CSSPseudoElement extends EventTarget , so it inherits the following methods:

EventTarget.addEventListener()

Registers an event handler of a specific event type on the pseudo-element.

EventTarget.dispatchEvent()

Dispatches an event to this pseudo-element.

EventTarget.removeEventListener()

Removes an event listener from the pseudo-element.

范例

Basic example using Element.pseudo

Using pseudo-elements, most modern browsers will automatically add quotation marks around text inside a <q> element. (A style rule may be needed to add quotation marks in older browsers.) The example below demonstrates the basic properties of the CSSPseudoElement object representing the opening quotation mark.

const element = document.querySelector('q');
const cssPseudoElement = element.pseudo('::before');
console.log(cssPseudoElement.element); // Outputs [object HTMLQuoteElement]
console.log(cssPseudoElement.type); // Outputs '::before'
					

规范

规范	状态	注释
CSS Pseudo-Elements Level 4 The definition of 'CSSPseudoElement' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
CSSPseudoElement	Chrome No	Edge No	Firefox 75 Disabled 75 Disabled Disabled From version 75: this feature is behind the dom.css_pseudo_element.enabled preference. To change preferences in Firefox, visit about:config. 不支持 63 — 75 Disabled Disabled From version 63 until version 75 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. 不支持 47 — 63 Disabled Disabled From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 63 Disabled 63 Disabled Disabled From version 63: this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. 不支持 47 — 63 Disabled Disabled From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	Opera Android No	Safari iOS No	Samsung Internet Android No
element	Chrome No	Edge No	Firefox 75 Disabled 75 Disabled Disabled From version 75: this feature is behind the dom.css_pseudo_element.enabled preference. To change preferences in Firefox, visit about:config. 不支持 67 — 75 Disabled Disabled From version 67 until version 75 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. 不支持 63 — 67 Alternate Name Disabled Alternate Name Uses the non-standard name: parentElement Disabled From version 63 until version 67 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. 不支持 47 — 63 Alternate Name Disabled Alternate Name Uses the non-standard name: parentElement Disabled From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 67 Disabled 67 Disabled Disabled From version 67: this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. 不支持 63 — 67 Alternate Name Disabled Alternate Name Uses the non-standard name: parentElement Disabled From version 63 until version 67 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. 不支持 47 — 63 Alternate Name Disabled Alternate Name Uses the non-standard name: parentElement Disabled From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	Opera Android No	Safari iOS No	Samsung Internet Android No
type	Chrome No	Edge No	Firefox 75 Disabled 75 Disabled Disabled From version 75: this feature is behind the dom.css_pseudo_element.enabled preference. To change preferences in Firefox, visit about:config. 不支持 63 — 75 Disabled Disabled From version 63 until version 75 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. 不支持 47 — 63 Disabled Disabled From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 63 Disabled 63 Disabled Disabled From version 63: this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. 不支持 47 — 63 Disabled Disabled From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	Opera Android No	Safari iOS No	Samsung Internet Android No

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

用户必须明确启用此特征。

用户必须明确启用此特征。

使用非标名称。

另请参阅

• Element.pseudo()
• Web 动画 API
• Element.animate()

元数据

• 最后修改： Feb 17, 2020

相关话题

1. CSSPseudoElement
2. 特性

   1. element
   2. type
3. 继承：

   1. EventTarget