---
title: CSSStyleSheet
slug: Web/API/CSSStyleSheet
tags:
  - API
  - CSSOM
  - CSSOM API
  - CSSStyleSheet
  - Interface
  - Reference
  - Stylesheets
  - TopicStub
translation_of: Web/API/CSSStyleSheet
---
<p>{{ APIRef("CSSOM") }}</p>

<p><span class="seoSummary"><strong><code>CSSStyleSheet</code></strong> <span>接口</span>代表一个 <a href="/zh-CN/docs/Web/CSS">CSS</a> 样式表，并允许检查和编辑样式表中的规则列表。</span>它从父类型 {{domxref("StyleSheet")}} 继承属性和方法。</p>

<p>一个 CSS 样式表包含了一组表示规则的 {{domxref("CSSRule")}} 对象。每条 CSS 规则可以通过与之相关联的对象进行操作，这些规则被包含在 {{domxref("CSSRuleList")}} 内，可以通过样式表的 {{domxref("CSSStyleSheet.cssRules", "cssRules")}} 属性获取。</p>

<p>例如，{{domxref("CSSStyleRule")}} 对象中的一条规则可能包含这样的样式：</p>

<pre class="brush: css">h1, h2 {
  font-size: 16pt;
}
</pre>

<p>另一条规则可能是一条“@”规则（<em>at-rule</em>），例如  {{cssxref("@import")}} 或 {{cssxref("@media")}} 等等。</p>

<p>在<a href="#说明">说明</a>部分中查看 <code>CSSStyleSheet</code> 对象的多种获取方式。</p>

<h2 id="属性">属性</h2>

<p>继承自 <em>{{domxref("StyleSheet")}}。</em></p>

<dl>
 <dt id="cssRules">{{domxref("CSSStyleSheet.cssRules", "cssRules")}} {{ReadOnlyInline}}</dt>
 <dd>
 <p>返回一个实时的 {{domxref("CSSRuleList")}}，其中包含组成样式表的 {{domxref("CSSRule")}} 对象的一个最新列表。</p>

 <p>这一般用于获取单条规则，如下：</p>

 <pre><code>styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code></pre>

 <p>使用<code>CSSStyleSheet</code> 的 {{domxref("CSSStyleSheet.insertRule", "insertRule()")}} 和 {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}} 方法以在 <code>cssRules</code> 中添加或移除规则。</p>
 </dd>
 <dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule", "ownerRule")}} {{ReadOnlyInline}}</dt>
 <dd>如果一个样式表示通过{{cssxref("@import")}} 规则引入文档，那么 <code>ownerRule</code> 属性会返回相应的{{domxref("CSSImportRule")}}对象，否则返回 <code>null</code>。</dd>
</dl>

<h2 id="方法">方法</h2>

<p>继承自 <em>{{domxref("StyleSheet")}}。</em></p>

<dl>
 <dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}}</dt>
 <dd>从样式表中删除特定位置的一条规则。</dd>
 <dt id="insertRule">{{domxref("CSSStyleSheet.insertRule", "insertRule()")}}</dt>
 <dd>向样式表的特定位置插入一条新规则，需要提供新规则的完整文本。</dd>
</dl>

<h2 id="遗留属性">遗留属性</h2>

<p><em>这些遗留属性是很久以前由微软提出的，不应该再使用，但这些属性短期内不会被移除。</em></p>

<dl>
 <dt>{{domxref("CSSStyleSheet.rules", "rules")}} {{ReadOnlyInline}}</dt>
 <dd><code>rules</code> 属性的功能与标准的{{domxref("CSSStyleSheet.cssRules", "cssRules")}}属性相同；它返回一个实时的 {{domxref("CSSRuleList")}}， 其中包含样式表中所有规则的一个最新列表。</dd>
</dl>

<h2 id="遗留方法">遗留方法</h2>

<p><em>这些遗留方法是很久以前由微软提出的，应尽量避免使用，但这些方法短期内不会被移除。</em></p>

<dl>
 <dt>{{domxref("CSSStyleSheet.addRule", "addRule()")}}</dt>
 <dd>
 <p>向样式表添加一条新规则，需要提供应用样式的选择器和应用在匹配元素上的样式块。</p>

 <p>这和 {{domxref("CSSStyleSheet.insertRule", "insertRule()")}} 不同，后者只是简单地将整个传入的规则文本当作一个字符串。</p>
 </dd>
 <dt>{{domxref("CSSStyleSheet.removeRule", "removeRule()")}}</dt>
 <dd>与{{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}}功能相同；从样式表的规则列表的特定位置中移除规则。</dd>
</dl>

<h2 id="说明">说明</h2>

<p>在一些浏览器中，如果一个样式表加载自不同的域，访问 <code>cssRules</code> 属性时会抛出 <code>SecurityError</code>。</p>

<p>一个样式表最多与一个{{domxref("Document")}}链接，即所应用的那个{{domxref("Document")}}（除非{{domxref("StyleSheet.disabled", "disabled")}}）。一个特定文档的 <code>CSSStyleSheet</code> 对象列表可用 {{domxref("document.styleSheets")}} 属性获取。一个特定的样式表也可以通过其所在对象（<code>Node</code> 或 <code>CSSImportRule</code>）获取，如果有的话。</p>

<p>在文档的样式表加载时，一个 <code>CSSStyleSheet</code> 对象由浏览器自动创建并插入至文档的{{domxref("Document.styleSheets")}}列表中。由于样式表列表不能直接修改，我们没有什么有效的手段取手动创建一个新的 <code>CSSStyleSheet</code> 对象（不过<a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a>很快会来到web平台，而且Blink早已支持）。需要创建新的样式表就直接在文档中插入{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 元素吧。</p>

<p>以下是将样式表链接到文档的一些方式（可能不完整）：</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">样式表与文档链接的原因</th>
   <th scope="col">是否出现在<code>document.<br>
    styleSheets</code> 列表中</th>
   <th scope="col">获取样式表对象所在的元素/规则</th>
   <th scope="col">所在对象的接口</th>
   <th scope="col">从所在对象获取CSSStyleSheet对象</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>文档中的{{HTMLElement("style")}} 和{{HTMLElement("link")}} 元素</td>
   <td>是</td>
   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
   <td>{{domxref("HTMLLinkElement")}},<br>
    {{domxref("HTMLStyleElement")}},<br>
    或 {{domxref("SVGStyleElement")}}</td>
   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
  </tr>
  <tr>
   <td>使用CSS {{cssxref("@import")}} 从其他样式表导入并应用到文档的规则</td>
   <td>是</td>
   <td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
   <td>{{domxref("CSSImportRule")}}</td>
   <td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
  </tr>
  <tr>
   <td><code>&lt;?xml-stylesheet ?&gt;</code> processing instruction in the (non-HTML) document</td>
   <td>是</td>
   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
   <td>{{domxref("ProcessingInstruction")}}</td>
   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
  </tr>
  <tr>
   <td>HTTP链接头部</td>
   <td>是</td>
   <td><em>N/A</em></td>
   <td>N/A</td>
   <td>N/A</td>
  </tr>
  <tr>
   <td>用户代理（默认）样式表</td>
   <td>否</td>
   <td>N/A</td>
   <td>N/A</td>
   <td>N/A</td>
  </tr>
 </tbody>
</table>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>规范</th>
   <th>状态</th>
   <th>备注</th>
  </tr>
  <tr>
   <td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
   <td>{{Spec2("CSSOM")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
   <td>{{Spec2("DOM2 Style")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.CSSStyleSheet")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/CSS_Object_Model">CSS Object Model</a></li>
 <li><a href="/zh-CN/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
</ul>