CSSRule: type 属性

已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。

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

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2024年1月1日修改。

在 GitHub 上查看此页面 • 报告此内容的此问题