diff --git a/docs/advance/print.md b/docs/advance/print.md
new file mode 100644
index 0000000..1fda1e4
--- /dev/null
+++ b/docs/advance/print.md
@@ -0,0 +1,150 @@
+# 打印样式
+
+## 基本用法
+
+`@media print`命令可以设置打印样式,即用户选择打印当前网页时,生效的 CSS 规则。
+
+```css
+@media print {
+ h1 { font-size: 16pt; }
+}
+```
+
+上面代码设置的`h1`样式,对屏幕浏览不产生效果,只有用户打印网页时才会生效。
+
+`@media print`命令可以与正常样式规则混合使用。
+
+```css
+p { margin: 1em 0; }
+
+@media print {
+ .related-articles { display: none; }
+}
+```
+
+上面代码中,`p`元素的样式对屏幕浏览和打印都有效,`.related-articles`的样式只对打印有效。
+
+如果要设置某些规则只对屏幕浏览有效,可以像下面这样写。
+
+```css
+@media screen {
+ /* 只对屏幕浏览有效 */
+}
+
+@media print {
+ /* 只对打印有效 */
+}
+```
+
+## 分页符
+
+分页符属性用来设置页面的分页(即另起一页),共有三个相关属性。
+
+- page-break-before:元素之前分页
+- page-break-after:元素之后分页
+- page-break-inside:元素内部分页
+
+这三个属性的值都是两个:`always`(生效)和`avoid`(避免)。
+
+```css
+h1 {
+ /* 总是在 h1 元素之前分页 */
+ page-break-before: always;
+}
+
+section.city-map {
+ /* 在元素之前和之后分页,即该元素单独占据一页 */
+ page-break-before: always;
+ page-break-after: always;
+}
+
+table {
+ /* 表格尽可能不要分页 */
+ page-break-inside: avoid;
+}
+```
+
+## orphans 属性,widow 属性
+
+`orphans`属性和`widow`属性设置某个元素如何跨页拆分。
+
+`orphans`属性设置跨页前的行数少于多少行时,所有行都移到下一页打印。
+
+```css
+p {
+ orphans: 3;
+}
+```
+
+上面代码设置,如果某个段落出现在上一页的结尾少于3行(比如只有两行),那么该段落全部移到下一页显示。
+
+`widow`属性设置出现在新页面的行数,最少应该有几行。
+
+```css
+p {
+ widow: 2;
+}
+```
+
+上面代码设置,如果某个段落出现在新页面的开头少于两行(比如只有一行),那么该段落全部移到上一页显示。
+
+## @page 命令
+
+`@page`命令主要用来定义页面距。
+
+```css
+@page {
+ margin: 2cm;
+}
+```
+
+此外,还可以用`:first`、`:last`、`:left`、`:right`和`:blank`选择器,选中特殊页面。
+
+```css
+@page:first {
+ margin: 0;
+}
+```
+
+上面代码设置第一页的页边距为`0`。
+
+## 技巧
+
+### 重复表格的表头
+
+如果希望打印表格的时候,每一页都出现表头,只需要使用`<thead>`元素定义表头,`<tbody>`元素定义表的数据部分即可。
+
+```html
+<table class="structure">
+ <thead>
+ <tr>
+ <th>City</th>
+ <th>Population</th>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Sydney</td>
+ <td>4.627 million (2018)</td>
+ </tr>
+ </tbody>
+</table>
+```
+
+上面代码中,如果表格跨页,表头的`City`和`Population`字段会在每一页都打印出来。
+
+### 打印链接的网址
+
+如果希望打印出链接的网址,可以使用`:after`伪元素。
+
+```css
+@media print {
+ a[href]:after {
+ content: "(" attr(href) ")";
+ }
+}
+```
+
+## 参考链接
+
+- [Print CSS basics in 10 minutes](https://www.paperplane.app/blog/print-css-basics/), Paperplay
+
diff --git a/docs/feature/counter.md b/docs/feature/counter.md
new file mode 100644
index 0000000..7270531
--- /dev/null
+++ b/docs/feature/counter.md
@@ -0,0 +1,148 @@
+# CSS 计数器
+
+## 简介
+
+- counter-reset:新建或重置一个计数器。
+- counter-increment:指定计数器的值加1。
+- counter():取出指定计数器的值。
+
+```css
+counter-reset:counterName;
+counter-increment: counterName;
+counter(counterName);
+```
+
+下面是一个例子。
+
+```css
+ul{
+ counter-reset: section;
+}
+li{
+ list-style-type: none;
+ counter-increment: section;
+}
+li:before{
+ content: counters(section, '-') '.';
+}
+```
+
+## counter-reset
+
+`counter-reset`属性新建或重置计数器。计数器的值默认为`0`。
+
+可以使用第二个参数,修改计数器的默认值。
+
+```css
+counter-reset: count -1;
+```
+
+上面示例将计数器的默认值设为`-1`。
+
+可以在一条语句里面,同时新建多个计数器。
+
+```css
+counter-reset: counter1 1 counter2 4;
+counter-reset: chapter section 1 page;
+```
+
+上面示例,第一行新建了两个计数器,第二行新建了三个计数器,并且计数器`section`的默认值设为`1`。
+
+如果这个属性的值设为`none`,则表示不重置计数器,可以用来取消上层规则的设置。
+
+## counter-increment
+
+`counter-increment`属性默认将计数器的值加`1`,但也可以使用第二个值,指定变化的幅度。
+
+```css
+counter-increment: counter-name -1;
+```
+
+上面示例表示将计数器的值减`1`。
+
+可以在一条`counter-increment`语句里面,同时改变多个计数器。
+
+```css
+counter-increment: counter1 1 counter2 -4;
+
+counter-increment: chapter section 2 page;
+```
+
+上面示例的第一行,计数器`counter1`增加`1`,计数器`counter2`减去`4`。第二行,计数器`chapter`和`page`增加`1`,计数器`section`增加2。
+
+如果这个属性设为`none`,表示不改变计数器的值。
+
+## counter()
+
+`counter()`还有可选的第二个参数,设置计数器的值样式,默认是阿拉伯数字。
+
+```css
+counter(countername, upper-roman);
+```
+
+上面示例将计数器的值样式设为大写的罗马数字。
+
+常用的样式值如下。
+
+- decimal-leading-zero:数字带有前导0。
+- lower-roman:小写的罗马数字。
+- upper-roman:大写的罗马数字。
+- lower-alpha:小写的英文字母。
+- upper-alpha:大写的英文字母。
+
+也可以使用`@counter-style`定义自己的规则。
+
+```css
+@counter-style winners-list {
+ system: fixed;
+ symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+ suffix: " ";
+}
+```
+
+上面示例是金牌、银牌、铜牌的计数符号。
+
+```css
+@counter-style thumbs {
+ system: cyclic;
+ symbols: "1円F44D";
+ suffix: " ";
+}
+
+ul {
+ list-style: thumbs;
+}
+```
+
+上面示例是将列表符号变成点赞。
+
+```css
+@counter-style circled-alpha {
+ system: fixed;
+ symbols: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z;
+ suffix: " ";
+}
+
+.items {
+ list-style: circled-alpha;
+}
+```
+
+上面示例将列表符号变成带圈的英文字母。
+
+## counters()
+
+`counters()`用来取出计数器的值,并且指定多重计数器之间的连接字符。
+
+```css
+counters(name, strings, style);
+```
+
+它与`counter()`的不同是多了一个`strings`参数,表示子序号的连接字符串。
+
+```css
+counters(countername, '-');
+counters(countername, '.', upper-roman);
+```
+
+上面示例第一行中,计数器与子计数器的连接符号为`-`。第二行为小数点。
diff --git a/docs/feature/form.md b/docs/feature/form.md
new file mode 100644
index 0000000..5e9c7ab
--- /dev/null
+++ b/docs/feature/form.md
@@ -0,0 +1,18 @@
+# 表单的 CSS 设置
+
+## textarea
+
+文本框(textarea)用于让用户输入大量文本。它的高度通常是固定的,如果用户输入的文本多于文本框的高度,文本框就会出现滚动条,只有拖动滚动条,才能看见文本的其余部分。
+
+`form-sizing`属性让文本框具有自适应高度,随着用户输入的文本增加,而增加文本框的高度。
+
+```css
+textarea {
+ form-sizing: normal;
+}
+```
+
+## 参考链接
+
+- [Textareas with auto-increasing height using CSS](https://www.amitmerchant.com/textarea-auto-increase-height/)
+
diff --git a/docs/layout/flexbox.md b/docs/layout/flexbox.md
index 7fcde37..6cb436c 100644
--- a/docs/layout/flexbox.md
+++ b/docs/layout/flexbox.md
@@ -208,7 +208,7 @@ div {
> - `space-around`:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
> - `stretch`(默认值):轴线占满整个交叉轴。
 
-### 四、容器的属性
+## 四、项目的属性
 
 以下6个属性设置在项目上。
 
diff --git a/docs/position.md b/docs/position.md
index b114db1..2404f4c 100644
--- a/docs/position.md
+++ b/docs/position.md
@@ -1,12 +1,173 @@
 # position
 
-`static`是`position`属性的默认值,表示元素在文档布局里面的正常位置。静态元素不能指定`top`、`left`等表示位置的属性。
+`position`属性用来指定一个元素在网页上的位置,一共有5种定位方式,即`position`属性主要有五个值。
 
-`absolute`表示当前元素相对于它的容器元素的绝对位置。它独立于其他元素,不再是正常内容布局的一部分。绝对定位元素的容器元素,是它最近一层不是`static`布局的元素,如果没有的话,就是相对于`document`元素的布局。
+> - `static`
+> - `relative`
+> - `fixed`
+> - `absolute`
+> - `sticky`
 
-`fixed`表示元素位置相对于浏览器窗口是固定的。这个元素总是可见,而且不会随着页面滚动而滚动。固定定位的元素,独立于其他元素,不是正常内容布局的一部分。
+下面就依次介绍这五个值。
 
-`relative`表示元素的位置是相对于它的正常位置。它依然属于内容布局的一部分,周边元素不受它的位置改变的影响。
+## static 属性值
+
+`static`是`position`属性的默认值。如果省略`position`属性,浏览器就认为该元素是`static`定位。
+
+这时,浏览器会按照源码的顺序,决定每个元素的位置,这称为&quot;正常的页面流&quot;(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111720.jpg)
+
+注意,`static`定位所导致的元素位置,是浏览器自主决定的,所以这时`top`、`bottom`、`left`、`right`这四个属性无效。
+
+## relative,absolute,fixed
+
+`relative`、`absolute`、`fixed`这三个属性值有一个共同点,都是相对于某个基点的定位,不同之处仅仅在于基点不同。所以,只要理解了它们的基点是什么,就很容易掌握这三个属性值。
+
+这三种定位都不会对其他元素的位置产生影响,即不管有没有这个元素,其他元素的位置不变,因此元素之间可能产生重叠。
+
+### relative 属性值
+
+`relative`表示,相对于默认位置(即`static`时的位置)进行偏移,即定位基点是元素的默认位置。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111721.jpg)
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111722.jpg)
+
+它必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,用来指定偏移的方向和距离。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111723.jpg)
+
+```css
+div {
+ position: relative;
+ top: 20px;
+}
+```
+
+上面代码中,`div`元素从默认位置向下偏移`20px`(即距离顶部`20px`)。
+
+### absolute 属性值
+
+`absolute`表示,相对于祖先元素(一般是父元素)进行偏移,即定位基点通常是父元素。
+
+它有一个重要的限制条件:父元素不能是`static`定位,否则定位基点会移到最近一个非`static`定位的祖先元素。如果所有祖先元素都是`static`定位,定位基点就变成整个网页的根元素`html`。另外,`absolute`定位也必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111801.jpg)
+
+```css
+/*
+ HTML 代码如下
+ <div id="father">
+ 
+ </div>
+*/
+
+#father {
+ positon: relative;
+}
+#son {
+ position: absolute;
+ top: 20px;
+}
+```
+
+上面代码中,父元素是`relative`定位,子元素是`absolute`定位,所以子元素的定位基点是父元素,相对于父元素的顶部向下偏移`20px`。如果父元素是`static`定位,上例的子元素就是距离网页的顶部向下偏移`20px`。
+
+注意,`absolute`定位的元素会被&quot;正常页面流&quot;忽略,即在&quot;正常页面流&quot;中,该元素所占空间为零,周边元素不受影响。
+
+### fixed 属性值
+
+`fixed`表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111802.jpg)
+
+它如果搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,表示元素的初始位置是基于视口计算的,否则初始位置就是元素的默认位置。
+
+```css
+div {
+ position: fixed;
+ top: 0;
+}
+```
+
+上面代码中,`div`元素始终在视口顶部,不随网页滚动而变化。
+
+## 四、sticky 属性值
+
+`sticky`跟前面四个属性值都不一样,它会产生动态效果,很像`relative`和`fixed`的结合:一些时候是`relative`定位(定位基点是自身默认位置),另一些时候自动变成`fixed`定位(定位基点是视口)。
+
+因此,它能够形成&quot;动态固定&quot;的效果。比如,网页的搜索工具栏,初始加载时在自己的默认位置(`relative`定位)。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111604.jpg)
+
+页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(`fixed`定位)。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111605.jpg)
+
+等到页面重新向上滚动回到原位,工具栏也会回到默认位置。
+
+`sticky`生效的前提是,必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,不能省略,否则等同于`relative`定位,不产生&quot;动态固定&quot;的效果。原因是这四个属性用来定义&quot;偏移距离&quot;,浏览器把它当作`sticky`的生效门槛。
+
+它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与`sticky`元素的距离达到生效门槛,`relative`定位自动切换为`fixed`定位;等到父元素完全脱离视口时(即完全不可见),`fixed`定位自动切换回`relative`定位。
+
+请看下面的示例代码。(注意,除了已被淘汰的 IE 以外,其他浏览器目前都支持`sticky`。但是,Safari 浏览器需要加上浏览器前缀`-webkit-`。)
+
+```css
+#toolbar {
+ position: -webkit-sticky; /* safari 浏览器 */
+ position: sticky; /* 其他浏览器 */
+ top: 20px;
+}
+```
+
+上面代码中,页面向下滚动时,`#toolbar`的父元素开始脱离视口,一旦视口的顶部与`#toolbar`的距离小于`20px`(门槛值),`#toolbar`就自动变为`fixed`定位,保持与视口顶部`20px`的距离。页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),`#toolbar`恢复成`relative`定位。
+
+## 五、 sticky 的应用
+
+`sticky`定位可以实现一些很有用的效果。除了上面提到&quot;动态固定&quot;效果,这里再介绍两个。
+
+## 5.1 堆叠效果
+
+堆叠效果(stacking)指的是页面滚动时,下方的元素覆盖上方的元素。下面是一个图片堆叠的例子,下方的图片会随着页面滚动,覆盖上方的图片(查看 [demo](https://jsbin.com/fegiqoquki/edit?html,css,output))。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111609.jpg)
+
+HTML 代码就是几张图片。
+
+```html
+
+
+
+```
+
+CSS 代码极其简单,只要两行。
+
+```css
+div {
+ position: sticky;
+ top: 0;
+}
+```
+
+它的原理是页面向下滚动时,每张图片都会变成`fixed`定位,导致后一张图片重叠在前一张图片上面。详细解释可以看[这里](https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f)。
+
+### 5.2 表格的表头锁定
+
+大型表格滚动的时候,表头始终固定,也可以用`sticky`实现(查看 [demo](https://jsbin.com/decemanohe/edit?html,css,output))。
+
+![](https://www.wangbase.com/blogimg/asset/201911/bg2019111610.jpg)
+
+CSS 代码也很简单。
+
+```css
+th {
+ position: sticky;
+ top: 0; 
+}
+```
+
+需要注意的是,`sticky`必须设在`<th>`元素上面,不能设在`<thead>`和`<tr>`元素,因为这两个元素没有`relative`定位,也就无法产生`sticky`效果。详细解释可以看[这里](https://css-tricks.com/position-sticky-and-table-headers/)。
 
 ## z-index
 
diff --git a/docs/properties.md b/docs/properties.md
index 7cb68eb..346e114 100644
--- a/docs/properties.md
+++ b/docs/properties.md
@@ -1,5 +1,180 @@
 # CSS 属性
 
+## `inherit`属性值
+
+CSS 的许多属性可以继承,即子元素默认继承父元素的属性。比如,`body`元素的字体样式,可以被页面的所有元素继承。
+
+```css
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+```
+
+上面代码中,`body`设置了`font-family`了,它的后代元素就不用设置这个属性了,除非需要改变字体。
+
+根据标准,以下 CSS 属性可以继承。
+
+1. `azimuth`
+2. `border-collapse`
+3. `border-spacing`
+4. `caption-side`
+5. `color`
+6. `cursor`
+7. `direction`
+8. `elevation`
+9. `empty-cells`
+10. `font-family`
+11. `font-size`
+12. `font-style`
+13. `font-variant`
+14. `font-weight`
+15. `font`
+16. `letter-spacing`
+17. `line-height`
+18. `list-style-image`
+19. `list-style-position`
+20. `list-style-type`
+21. `list-style`
+22. `orphans`
+23. `pitch-range`
+24. `pitch`
+25. `quotes`
+26. `richness`
+27. `speak-header`
+28. `speak-numeral`
+29. `speak-punctuation`
+30. `speak`
+31. `speech-rate`
+32. `stress`
+33. `text-align`
+34. `text-indent`
+35. `text-transform`
+36. `visibility`
+37. `voice-family`
+38. `volume`
+39. `white-space`
+40. `widows`
+41. `word-spacing`
+
+其他属性默认不能继承,比如`border`属性。父元素设置了`border`以后,子元素如果要有边框,必须重新设一遍。
+
+```css
+.main-list {
+ border: 1rem solid #000;
+ color: red;
+ font-family: Verdana
+}
+
+.sub-list {
+ border: 1rem solid #000;
+}
+```
+
+上面代码中,`.sum-list`是`.main-list`的子元素,两者的边框必须各自设置。
+
+CSS 提供了`inherit`属性值,如果要让子元素继承父元素的属性,可以使用这个属性值。
+
+```css
+.main-list {
+ border: 1rem solid #000;
+ color: red;
+ font-family: Verdana;
+}
+
+.sub-list {
+ border: inherit;
+}
+```
+
+上面代码中,`.sub-list`的`border`属性,就继承了`.main-list`,从而两者的边框都一样。它的好处是,如果要修改边框,只要修改一处即可。
+
+## initial 属性值
+
+`initial`属性值可以将 CSS 属性设回初始值。它的主要用处是,让那些默认继承父元素的 CSS 属性不再继承,回到初始值。
+
+```css
+.berries {
+ border: 1rem solid #000;
+ color: red;
+ font-family: Verdana;
+ margin-bottom: 10px;
+}
+
+.berries h1 {
+ color: initial;
+}
+```
+
+上面代码中,`.berries`是`h1`的父元素,而`color`属性是可以继承的,如果不设置`h1`的颜色,`h1`就会是红色的。现在`h1`的`color`设为`initial`,就不再继承父元素的颜色,而是回到浏览器给予`h1`的默认颜色,即黑色。
+
+## unset 属性值
+
+`unset`属性值的作用是,如果存在继承,则继承父元素的值(等同于`inherit`),如果不存在继承,则重置为初始值(等同于`initial`)。`unset`的意思,就是去除当前样式表对该元素的样式设置。
+
+```css
+h1 {
+ color: blue;
+}
+
+div {
+ border: 1rem solid #000;
+ color: red;
+ font-family: Verdana;
+ margin-bottom: 10px;
+}
+
+.berries h1 {
+ color: unset;
+}
+```
+
+上面代码中,`div`是`h1`的父元素,如果不设置`.berries h1`的`color`属性,`h1`会显示为蓝色,设成`color: unset`以后,`h1`继承了父元素的`color`,显示为红色。
+
+`unset`与`inherit`的区别在于,如果不设置`div`的`color`,那么`.berries h1`将显示为浏览器赋予的默认颜色(黑色),而不是红色。
+
+```css
+h1 {
+ color: blue;
+}
+
+div {
+ border: 1rem solid #000;
+ font-family: Verdana;
+ margin-bottom: 10px;
+}
+
+.berries h1 {
+ color: unset;
+}
+```
+
+上面代码中,父元素`div`没有设置颜色,这时子元素`.berries h1`将显示为浏览器默认颜色(黑色),而不是蓝色。
+
+## revert 属性值
+
+`revert`属性值用于消除当前样式表对该元素设置的样式,这也是它名字的含义(`还原`),基本等同于`unset`。具体来说,如果存在继承,该元素会显示继承的属性值,如果不存在继承,则分成以下两种情况。
+
+- `revert`用在网站提供的样式表:则显示用户演示表设置的值。如果不存在用户样式表,则浏览器赋予的默认值。
+- `revert`用在用户提供的样式表:显示浏览器赋予的默认值。
+
+我们知道,样式表可以分成三层:用户提供的样式表,可以覆盖网站提供的样式表;网站提供的样式表,又可以覆盖浏览器的默认样式表。`revert`主要针对的就是多层样式表同时存在的情况,然后用于去除本层样式表对元素的影响。
+
+大多数情况下,`revert`与`unset`是一样的,主要差异是 CSS 属性的初始值与浏览器的默认值可能有差异。
+
+```html
+<h3>hello</h3>
+<h3>hello</h3>
+```
+
+上面代码中,`font-weight: unset`会回到`font-weight`的初始值,即`normal`。而``会回到浏览器对`h3`的`font-weight`默认值,一般是粗体。
+
+如果想要清除当前样式表对该元素的所有设置,可以使用`all: revert`。
+
+```html
+<h3>hello</h3>
+```
+
+
 ## background-blend-mode
 
 background-blend-mode属性指定背景的颜色混合模式,共有16个值可取:normal(默认值,即不混合), multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity(显示单色效果)。
diff --git a/docs/selectors/pseudo-class.md b/docs/selectors/pseudo-class.md
index 1e6b363..a807684 100644
--- a/docs/selectors/pseudo-class.md
+++ b/docs/selectors/pseudo-class.md
@@ -2,7 +2,7 @@
 
 伪元素(pseudo-element)是 HTML 中并不存在的元素。例如,定义第一个字母或第一行文字时,并未在HTML中作相应的标记。
 
-伪类(pseudo-class)则应用于一组 HTML 元素,而你无需在 HTML 代码中用类标记它们。例如,使用:first-child可以选择某元素的第一个子元素,你就不用写成class="first-child"。更多关于伪类的内容。
+伪类(pseudo-class)是浏览器根据网页元素的状态,自动提供的 CSS 类,无需在 HTML 代码显式标记这些类。例如,使用:first-child可以选择某元素的第一个子元素,你就不用写成class="first-child"。更多关于伪类的内容。
 
 伪元素有四个。
 
@@ -23,8 +23,6 @@
 
 新的、未访问的链接显示为红色;访问过的链接变为橙色;
 
-
-
 ## 概述
 
 CSS 2.1非常有限,只提供了三个伪类。
@@ -124,7 +122,7 @@ p:last-of-type {
 
 ## :nth-child(),:nth-last-child()
 
-`:nth-child()`选中本类之中指定位置的元素。`:nth-last-child()`选中本类之中指定的倒数位置的元素。
+`:nth-child()`选中指定位置的子元素。`:nth-last-child()`选中指定的倒数位置的子元素。
 
 ```css
 p:nth-child(2) {
@@ -132,7 +130,18 @@ p:nth-child(2) {
 }
 ```
 
-上面代码中,`:nth-child()`选中第二个`p`元素。
+上面代码中,`:nth-child()`选中所有第二个子元素位置的`p`元素。
+
+注意,如果元素名与`:nth-child()`之间有没有空格,含义是不一样的。没有空格时,表示匹配该种子元素;有空格时,表示匹配该元素的子元素。
+
+
+```css
+p :nth-child(2) {
+ color: red;
+}
+```
+
+上面代码表示,匹配`p`元素内部的第二个子元素,而不是匹配`p`元素本身。
 
 `:nth-child()`和`:nth-last-child()`可以使用通配符作为参数,参见`:nth-of-type()`部分的说明。
 
@@ -144,19 +153,19 @@ ul li:nth-child(3n+3) {
 
 上面代码选中3、6、9等位置的`li`元素,`n`表示整数序列0、1、2、3......。
 
-这里还有一个技巧,如果要选中前三个元素,可以在`n`前面使用负数符号`-`。
+这里还有一个技巧,如果要选中前三个元素,可以在`n`前面使用负数符号1`-`。
 
 ```css
-ul li:nth-child(-n+3) {
+ul li:nth-child(-n + 3) {
 color: #ccc;
 }
 ```
 
-上面代码只会选中前三个`li`,因为当`n`大于等于`3`时,`-n+3`会小于等于0,而`li`的序号是从`1`开始的。
+上面代码只会选中前三个`li`,因为当`n`大于等于`3`时,`-n + 3`会小于等于0,而`li`的序号是从`1`开始的。
 
 相应的,`:nth-last-child(-n + 3)`就会选中最后三个元素,而`:nth-last-child(n + 4)`会选中除了最后三个以外的其他元素。
 
-除了使用`an+b`这种形式的表达式指定位置,还可以使用`odd`或`even`关键字,分别表示奇数位置或偶数位置的元素。
+除了使用`An + B`这种形式的表达式指定位置,还可以使用`odd`或`even`关键字,分别表示奇数位置或偶数位置的元素。
 
 ```css
 ul li:nth-child(odd) {
@@ -166,7 +175,7 @@ ul li:nth-child(odd) {
 
 ## :nth-of-type(),:nth-last-of-type()
 
-`:nth-of-type()`选中指定类型和指定位置的元素,`:nth-last-of-type()`选中倒数位置的指定类型和指定位置的元素。
+`:nth-of-type()`匹配指定类型和位置的元素,`:nth-last-of-type()`匹配倒数位置的指定类型和位置的元素。
 
 ```css
 p:nth-of-type(2) {
@@ -174,9 +183,9 @@ p:nth-of-type(2) {
 }
 ```
 
-`:nth-of-type`选中子元素之中的第二个`p`元素。
+上面代码中,`p:nth-of-type(2)`匹配第二个`p`元素。
 
-通配符用法。
+下面是通配符用法。
 
 ```css
 li:nth-of-type(2n) {
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://github.com/polar-user/css-tutorial/compare/master...wangdoc:css-tutorial:master.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://github.com/polar-user/css-tutorial/compare/master...wangdoc:css-tutorial:master.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>