CSSPseudoElement

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

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

特性

CSSPseudoElement.element 只读
Returns the originating/parent Element 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'
					

规范

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

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。
使用非标名称。

另请参阅