規則集合（Rule sets）用在區塊風格表與外部風格表檔案。規則集合由選擇器與風格定義區塊組成。其語法是：
選擇器 { 風格定義區塊 }
選擇器可設定各種選擇條件，當 HTML 的元素符合選擇條件時，才會採用其定義的風格。風格定義區塊接在選擇器之後，頭尾用兩個”{” ”}”包夾。區塊內含多組特徵與值，特徵與值用”:”相連；兩組特徵與值間用”;”分開。可用”/*”與”*/”加入解說。選擇器在 HTML 文件是不分大小寫；在 XML 則大小寫不同。選擇器的基本語法如下：
| * | E | E F | E > F | E:準類別 | E ~ F | E + F | E, F | E[att] | E.name | E#id |
星號 * 表所有元素。
- 風格用法：
<style type='text/css'>
.c1 * { color:red }
</style>
<div class=c1>
<i>性向測驗</i><br />
<code>高鐵</code><br />
<big>台灣大哥大</big>
</div> - 執行結果：
性向測驗
高鐵
台灣大哥大
- 這個範例用了類別 .c1 ，這是為了與部落格中的元素區分開來。下面的範例也都如此。
E 是 HTML 元素的名稱。
- 風格用法：
<style type='text/css'>
.c2 BIG { color:red }
</style>
<div class=c2>
<i>摸摸耳</i><br />
<code>高鐵</code><br />
<big>台灣大哥大</big>
</div> - 執行結果：
摸摸耳
高鐵
台灣大哥大
E F是兩個 HTML 元素的名稱，表示當 F 元素是 E 元素的後代時，選擇條件符合。
- 風格用法：
<style type='text/css'>
DIV.c3 EM { color:red }
</style>
<div class=c3>
<em>無名小站</em>
</div>
<em>NBA</em> - 執行結果：
無名小站NBA
:HOVER, :ACTIVE 的應用。這個練習製作一個下拉式選單。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.menu {position:relative;
float:left;
width:120px;
text-align:center;
border:solid 1px red;
}
.menu .list
{position:absolute;
display:none;
}
.menu:hover .list
{display:block;
white-space:pre;
background:white;
}
.menu:active .list
{background:yellow;}
</style>
<div class=menu>
動作遊戲
<div class=list><a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</div>
</div>
<div class=menu>
競速遊戲
<div class=list><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</div>
</div>
<br clear=all> - 執行結果：
E F是兩個 HTML 元素的名稱。E > F 表示當 F 元素是 E 元素的子代時，選擇條件符合。
- 風格用法：
<style type='text/css'>
DIV.c4 > STRONG { color:red }
</style>
<div class=c4>
<strong>台灣銀行</strong><br />
<p>
<strong>楓之谷</strong><br />
</p>
</div> - 執行結果：
台灣銀行
楓之谷
- 上面的例子中，第二個 STRONG 是孫代，所以不符合選擇條件。
- IE6 失敗；IE8, Firefox3.0, Safari, Chrome 都成功。
E:first-child
E:focus
E:hover
E:lang
E:link
E:visited
以上規則，請參考說明與範例。
E F是兩個 HTML 元素的名稱。表示 F 元素在 E 元素之後，且 F 元素與 E 元素有相同的父元素，則選擇條件符合。
- 風格用法：
<style type='text/css'>
.sib I ~ Q { color:red }
</style>
<div class=sib>
<q>射擊遊戲（在前面）</q><br />
<i>好玩遊戲（I 元素）</i><br />
<q>射擊遊戲（兄弟）</q>
<p><q>射擊遊戲（姪子）</q></p>
<q>益智遊戲（兄弟）</q>
</div>
<q>射擊遊戲（叔叔）</q> - 執行結果：
射擊遊戲（在前面）
好玩遊戲（I 元素）
射擊遊戲（兄弟）
射擊遊戲（姪子）
益智遊戲（兄弟）
射擊遊戲（叔叔）
- IE6 失敗；Firefox, Safari, Chrome 都成功。
:HOVER, :ACTIVE 的應用。這個練習利用滑鼠在三個 I 元素 上的游移，改變 EM 元素 的內容。
- 風格用法：
<style type='text/css'>
.sib2 I#i1:hover ~ EM:after
{content:'car';
color:red;
}
.sib2 I#i2:hover ~ EM:after
{content:'computer';
color:red;
}
.sib2 I#i3:hover ~ EM:after
{content:'network';
color:red;
}
.sib2 I#i1:active ~ EM:after
{background:white;}
.sib2 I#i2:active ~ EM:after
{background:white;}
.sib2 I#i3:active ~ EM:after
{background:white;}
</style>
<div class=sib2>
<i id=i1>汽車</i> /
<i id=i2>電腦</i> /
<i id=i3>網路</i><br />
<em>英文：</em>
</div> - 執行結果：
汽車 / 電腦 / 網路
英文：
- Firefox 成功；IE6, Safari, Chrome 失敗。
E F是兩個 HTML 元素的名稱。表示當 F 元素是直接接在 E 元素的後面時，選擇條件符合。
- 風格用法：
<style type='text/css'>
DIV.c5 + INS { color:red }
</style>
<div class=c5>
<ins>土豆網</ins><br />
</div>
<ins>正妹牆</ins> - 執行結果：
土豆網正妹牆
- IE6 失敗；IE8, Firefox3.0, Safari, Chrome 都成功。
多個選擇器可以使用相同的風格定義區塊，兩個選擇器用＂,＂分開。
- 風格用法：
<style type='text/css'>
I.c01, CODE.c02 { color:red }
</style>
<i class=c01>土豆網</i><br />
<code class=c02>正妹牆</code> - 執行結果：
土豆網
正妹牆
E[att=val]
E[att~=val]
E[att|=val]
E[att^=val]
E[att$=val]
E[att*=val]
以上規則，請參考說明與範例。
只能用在 HTML 文件，用”.”表示類別。E.name 表示 HTML 元素 E 的 CLASS 屬性設為 name 時，選擇條件符合。*.name 可省略寫成 .name。類別定義可以用來將元素分類，用不同的展現風格。
- 風格用法：
<style type='text/css'>
.girl {background:red}
.boy {background:blue}
</style>
<i class=girl>蔡依林</i> /
<i class=boy>吳宗憲</i> /
<i class=girl>林志玲</i> /
<i class=boy>周杰倫</i> - 執行結果： 蔡依林 / 吳宗憲 / 林志玲 / 周杰倫
用”#”宣告 ID。E#id007 表示元素的 ID 為 id007 時，選擇條件符合。由於 ID 在網頁中有唯一性，所以通常不加元素名稱。
- 風格用法：
<style type='text/css'>
#hot { color:red; width:200px; background:gray }
</style>
<div id=hot>
墨西哥水怪, 胡啟志, 雞腿王盒餐, 京台公路, 余筱萍, 曾馨瑩, 武昌排骨館,
何芊毅, 歐巴馬, 柴璐, 台灣之歌, 陳雲林, 小室哲哉, 消防猛男月曆, 蘇治芬, 台東海生館
</div> - 執行結果：
墨西哥水怪, 胡啟志, 雞腿王盒餐, 京台公路, 余筱萍, 曾馨瑩, 武昌排骨館, 何芊毅, 歐巴馬, 柴璐, 台灣之歌, 陳雲林, 小室哲哉, 消防猛男月曆, 蘇治芬, 台東海生館
