1 多重样式层叠
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
2 CSS 语法
2.1 值的不同写法和单位
p { color: #ff0000; }
CSS 的缩写形式：
p { color: #f00; }
2.2 写引号
提示：如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
2.4 继承及其问题
子元素从父元素继承属性。但是它并不总是按此方式工作。
创建一个针对子元素的特殊规则，这样它就会摆脱父元素的规则。
3 选择器
3.1 分组选择器
h1,h2,h3,h4,h5,h6 {
color: green;
}3.2 派生选择器
定义一个派生选择器：也叫上下文选择器 (contextual selectors)
li strong {
font-style: italic;
font-weight: normal;
}请注意标记为 <strong> 的蓝色代码的上下文关系：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li><li>我是正常的字体。</li> </ol>
在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字
3.2.1 后代选择器
再看看下面的 CSS 规则（后代选择器）：
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
下面是它施加影响的 HTML：
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p> <h2>This subhead is also red.</h2><h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
ul em {color:red;}
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
3.2.2 子元素选择器（Child selectors）
只能选择作为某元素子元素的元素
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
3.2.3 相邻兄弟选择器（Adjacent sibling selector）
可选择紧接在另一元素后的元素，且二者有相同父元素。
如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
用一个结合符只能选择两个相邻兄弟中的第二个元素。
3.2.4 结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
3.3 id 选择器
id 选择器以 "#" 来定义，一个html文件中只可出现一次。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red{color:red;}#green{color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<pid="red">这个段落是红色。</p> <pid="green">这个段落是绿色。</p>
id选择器和派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。
3.4 css类选择器
.center {text-align: center}<h1class="center"> This heading will be center-aligned </h1> <pclass="center"> This paragraph will also be center-aligned. </p>
.fancy td {
color: #f60;
background: #666;
}在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元。
td.fancy {
color: #f60;
background: #666;
}在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
3.5 属性选择器
带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}适用于由空格分隔的属性值：
[title~=hello] { color:red; }适用于由连字符分隔的属性值
[lang|=en] { color:red; }
3.6 总结
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。以空格分开 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。以连接词分开 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |