元素
替换元素和非替换元素
替换元素
用来替换元素的内容并非由文档内容直接表示。
如：img、input、textarea、 select等。
<img src="some-url.png">
非替换元素
其内容由用户代理（通常是浏览器）在元素本身生成的框中进行显示。
如：div、span和h1等元素。
块级元素和行内元素
块级元素
块级元素生成一个元素框，它会填充父元素的内容区，旁边不能有其他元素。如：
<p>和<div>
行内元素
行内元素是在一个文本行内生成元素框，这些元素不会在它们之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不破坏其显示。如：
<a>和<span>
引入CSS
link标记
<link rel="stylesheet" href="some-url" type="text/css" >
以上是link常用的属性，link还有一个media属性，可以用于在不同的显示设备上显示不同的效果。
同时，link的title属性用于向用户提供一个可选的样式，用户可以在浏览器的菜单中（如果浏览器支持）选择自己想要使用的样式表。
style元素
<style type="text/css">
/* Here is your own styles. */
</style>
@import指令
<style type="text/css">
@import url("some-url")
@import "another-url"
/* Here is your own styles. */
</style>
将@import放在style块中时，必须确保它（们）在style中最靠前的位置。
内联样式
<div style="..."></div>
<span style="..."></span>
选择器
元素选择器
文档的元素就是选择器本身。如：
body {...}
h1 {...}
通配符
“*”用于匹配所有元素。如：
* {font-size: 12px;}
类选择器
通过元素标签中的“class”属性进行选择。如：
元素：<div class="my-own-style"></div>
选择器：.my-own-style {...}
ID选择器
通过元素ID进行选择。如：
元素：<div id="ele"></div>
选择器：#ele {...}
虽然理论上所有元素应该拥有唯一的ID。但是，在多个元素具有相同ID的情况下，ID选择器的样式将使用在所有具有此ID的元素上。
HTML中的类选择器和ID选择器均是大小写敏感的。
属性选择器
属性选择器用于选取具有某个或某些属性的元素。
如：h1[class]、a[href][title]和*[title]等。
除此之外，还可以根据属性的值对元素进行选择。
完整属性值
完全属性值匹配要求属性的值以及值出现的顺序完全匹配。
部分属性值
整体属性中包含名为val的样式（注：此处val必须是完整的属性值名称，不能是属性值名称的一部分）：
el[attr~="val"]
整体属性以val开头（注：val必须出现在所有属性值最前面，否则不生效）：
el[attr^="val"]
整体属性以val结尾（注：val必须出现在所有属性值最后面，否则不生效）：
el[attr$="val"]
整体属性中包含val字符串（不必是完整的属性值）：
el[attr*="val"]
属性以val-开头或者等于val：
el[attr|="val"]
此选择器多用于lang属性。如：
*[lang|="en"]可以用于选择以下元素：
<div lang="en"></div>
<div lang="en-us"></div>
文档结构选择器
父子元素：在文档结构树上紧邻的两层所构成的层次包含（继承）关系。
后代元素：在文档结构树中存在继承关系，但是这些节点可能不处于直接相邻的两层。如爷爷与孙子、爷爷与曾孙子之间的关系。当然，父子关系也属于后代关系的一种。
后代选择器
el1 el2 {attr: val}
使用此选择器，el1所包含的所有el2元素均会被选中。
子元素选择器
el1 > el2 {attr: val}
使用此选择器，除非el1与el2处于直接相邻的两层，否则el2不会被选中。
相邻兄弟元素选择器
el1 + el2 {attr: val}
选择的是紧邻着e1的e2元素，如果e1前面还有e0，则e0不会被选中。
如果你熟悉jQuery，你会发现CSS的选择器与jQuery对应选择器的行为是一致的，这有助于大家理解和记忆选择器。但是jQuery提供的选择器种类远远多余CSS提供的选择器。
思考：
对于
<ul>
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
</ul>
下面两种选择器各是什么效果？
1、
li.active + li {
font-weight: bold;
}
2、
li + li {
font-weight: bold;
}
相邻元素选择器测试
伪类和伪元素
伪类
伪类是一种“假想”的类，通常情况下，你都无法在HTML代码中找到有任何地方显示地指定了某个元素为一个伪类。如，你不会看到一个链接具有以下的样式：<a class="visited">link</a>。这种写法虽然为锚指定了一个类，但是这个类是一个具体的visited类，而非我们想要的:visited伪类。
目前，CSS中主要有以下几个伪类：link、visited、focus、hover、active、first-child和lang等。
在CSS中，伪类的顺序很重要，推荐的顺序为link->visited->focus->hover->active，大家可以思考一下为什么会推荐这样的顺序。
此外，还需要特别注意first-child的用法，因为该伪类与大家所见到的字面意思有一些的出入。请大家思考一下，以下代码最终选择到的是哪些元素？
<html>
<head>
<style type="text/css">
li:first-child {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>父选项-1</li>
<li>父选项-2
<ol>
<li>子选项-1</li>
<li>子选项-2</li>
<li>子选项-3</li>
</ol>
</li>
<li>父选项-3</li>
</ul>
</body>
</html>
伪元素
文档中的一种假想元素，该元素在文档中并无实体标签与其对应。
label[required]:after {/*注：CSS3中，应该为::after*/
content: "*";
color: red;
}
将会使以下代码产生一般的“必填”项的效果：
<label required>Name</label>
<input type="text"></input>
使用伪元素达到简单的必填表单效果
也可以使用伪元素实现计数器的功能。
<style type="text/css">
body {
counter-reset: counter 0;
}
.counter {
counter-increment: counter;
}
.counter::before {
content:counter(counter) ' - ';
}
</style>
<div class="counter">元素</div>
<div class="counter">字体</div>
<div class="counter">定位</div>
伪元素计数效果
<style>
.blockquote:before {
content: open-quote;
}
.blockquote:after {
content: close-quote;
}
</style>
<p class="blockquote">简单写一句放，展示一下效果。</p>
使用伪元素添加内容
再加一些样式，便可达到更好的效果。
使用伪元素添加内容
网友评论