CSSRule：type 属性

已弃用：此功能不再推荐。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被弃用，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表以指导您的决策。请注意，此功能可能随时停止工作。

CSSRule 接口的只读type 属性是一个已弃用的属性，它返回一个整数，指示CSSRule 代表哪种类型的规则。

如果您需要区分不同类型的 CSS 规则，一个好的替代方法是使用constructor.name

const sheets = Array.from(document.styleSheets);
const rules = sheets.map((sheet) => Array.from(sheet.cssRules)).flat();

for (const rule of rules) {
  console.log(rule.constructor.name);
}

值

CSSRule.STYLE_RULE (1): 该规则是CSSStyleRule，最常见的规则类型：selector { prop1: val1; prop2: val2; }。
CSSRule.IMPORT_RULE (3): 该规则是CSSImportRule，表示@import 规则。
CSSRule.MEDIA_RULE (4): 该规则是CSSMediaRule。
CSSRule.FONT_FACE_RULE (5): 该规则是CSSFontFaceRule
CSSRule.PAGE_RULE (6): 该规则是CSSPageRule。
CSSRule.KEYFRAMES_RULE (7): 该规则是CSSKeyframesRule。
CSSRule.KEYFRAME_RULE (8): 该规则是CSSKeyframeRule。
CSSRule.NAMESPACE_RULE (10): 该规则是CSSNamespaceRule。
CSSRule.COUNTER_STYLE_RULE (11): 该规则是CSSCounterStyleRule。
CSSRule.SUPPORTS_RULE (12): 该规则是CSSSupportsRule。
CSSRule.FONT_FEATURE_VALUES_RULE (14): 该规则是CSSFontFeatureValuesRule。

值 CSSRule.UNKNOWN_RULE (0)、CSSRule.CHARSET_RULE (2)、CSSRule.DOCUMENT_RULE (13)、CSSRule.VIEWPORT_RULE (14) 和 CSSRule.REGION_STYLE_RULE (16) 无法再获取。

示例

const rules = document.styleSheets[0].cssRules;
console.log(rules[0].type);

规范

规范
CSS 对象模型 (CSSOM) # concept-css-rule-type

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。