文法
h1 {color:red; font-size:14px;}
共享聲明
h1,h2,h3,h4,h5,h6 {
color: green;
}
繼承
通過 CSS 繼承，子元素将繼承最進階元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字型，子元素的子元素也一樣。
如果你不希望 "Verdana, sans-serif" 字型被所有的子元素繼承，又該怎麼做呢？比方說，你希望段落的字型是 Times。沒問題。建立一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則。
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
派生
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
id選擇器
#red {color:red;}
#green {color:green;}
id 選擇器和派生選擇器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
類選擇器
.center {text-align: center}
class 也可被用作派生選擇器
.fancy td {
color: #f60;
background: #666;
}
類名為 fancy 的更大的元素内部的表格單元都會以灰色背景顯示橙色文字。
元素也可以基于它們的類而被選擇：
td.fancy {
color: #f60;
background: #666;
}
<td class="fancy">
那些以 fancy 标注的單元格都會是帶有灰色背景的橙色。那些沒有被配置設定名為 fancy 的類的單元格不會受這條規則的影響。
屬性選擇器
對帶有指定屬性的 HTML 元素設定樣式。
<style>
[lang|=en]
{
background:yellow;
}
</style>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="zh">nihao!</p>
隻有中間是橫杠才有效。
| 選擇器 | 描述 |
|---|---|
| [attribute] | 用于選取帶有指定屬性的元素。 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用于選取屬性值中包含指定詞彙的元素。 |
| [attribute|=value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 |
| [attribute^=value] | 比對屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 比對屬性值以指定值結尾的每個元素。 |
| [attribute*=value] | 比對屬性值中包含指定值的每個元素。 |
引入樣式表
引入（優）
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部（次之）
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内聯（不建議）
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值将從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h3 選擇器的三個屬性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
h3 {
text-align: right;
font-size: 20pt;
}
color: red;
text-align: right;
font-size: 20pt;
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)