## 回顧什么是外聯樣式 所謂外聯樣式，就是在 HTML 頁面中內嵌樣式表或者引入外部樣式文件，再通過 CSS 選擇器定位 HTML 頁面元素，為其定義樣式。 以下示例代碼，就是定義外聯樣式表: ```html <link rel="stylesheet" href="css/style.css"> ``` 上述示例代碼，通過 `<link>` 元素引入外部的樣式表。 ```html <style> .button { background-color: orange; } </style> ``` 上述示例代碼，通過 `<style>` 元素定義內嵌樣式表。 ## Document 對象的 styleSheets 屬性 Document 對象提供了 styleSheets 屬性，該屬性返回包含所有外聯樣式表（內嵌樣式表和外聯樣式表）的集合對象。 ```javascript var styleSheetList = document.styleSheets; ``` 上述語法結構中，作為返回值的 styleSheetList 是一個由 styleSheet 對象組成的列表，每個 styleSheet 對象表示 HTML 頁面中內嵌樣式表或外聯樣式表。 我們可以通過打印該屬性值進行測試: ```javascript console.log(document.styleSheets); ``` 上述示例代碼輸出的結果如下:  ## StyleSheetList 對象 Document 對象的 styleSheets 屬性返回的是一個 StyleSheetList 對象。該對象是一個類數組對象，可以通過 for 循環語句進行遍歷，或者將其轉換為數組。 > **值得注意的是:** StyleSheetList 對象本身不能使用數組方法進行操作。 我們可以通過以下示例代碼，測試研究 StyleSheetList 對象: ```javascript var styleSheetList = document.styleSheets; for (var i=0; i<styleSheetList.length; i++){ console.log(styleSheetList[i]); } ``` 上述示例代碼中，每次循環得到的是 StyleSheet 對象。 ## CSSStyleSheet 對象 CSSStyleSheet 對象表示一個 CSS 樣式表（內嵌樣式表或外聯樣式表）。CSSStyleSheet 實現了更為通用的 StyleSheet，也從其父級 StyleSheet 繼承了屬性和方法。 我們可以通過打印該對象進行測試: ```javascript console.log(document.styleSheets[0]); ``` 上述示例代碼輸出的結果如下:  ## CSSRuleList 對象 CSSStyleSheet 對象的 cssRules 屬性返回的是一個 CSSRuleList 對象。該對象是一個類數組對象，可以通過 for 循環語句進行遍歷，或者將其轉換為數組。 我們可以通過以下示例代碼，測試研究 CSSRuleList 對象: ```javascript var styleSheet = document.styleSheets[0]; var cssRuleList = styleSheet.cssRules; for(var i=0; i<cssRuleList.length; i++){ var cssRule = cssRuleList[i]; console.log(cssRule); } ``` 上述示例代碼中，每次循環得到是 CSSRule 對象。 ## CSSRule 對象 CSSRule 對象表示一個 CSS 規則。一個 CSS 樣式表包含了一組 CSS 規則。 CSSRule 對象的常見屬性： - style：返回 CSSStyleDeclaration 對象 - cssText：CSS 規則 - selectorText：選擇器 我們可以通過以下示例代碼，測試研究 CSSRule 對象: ```javascript console.log(document.styleSheets[1].cssRules[0]); ``` 上述示例代碼輸出的結果如下: