1还是变成红色，3也是变成红色，2和4还是不变。想想为什么？
那如果是这样呢？
1
2
<p>4</p>
<div>
<p>3</p>
</div>
由上到下显示的是1243。其中1，4，3是红色。
原因：
* 4所在的p元素，能不能被匹配，就看这个p元素是不是其div父元素的第一个子元素。是的，所以它变成红色了。
* 3所在的p元素，其**父元素实际上是内层div**，它也是内层div的第一个子元素，所以，3也是红色。
对于 **p:first-child** ，如何匹配？用三句话概括其步骤：
1. 要匹配的一定是p元素
2. 能不能被匹配？取决于p**是不是它父元素的第一个子元素**
3. 是的话，就匹配；不是的话，就不能匹配！
**类型2、div span:first-child**
1. 匹配的一定是span元素
2. span元素得是它父元素的第一个子元素
3. 最后，被匹配的span，得在div下面（E F组合选择器）
div span:first-child { color:red; }
先看一个例子，然后再分析到底是怎么匹配的
<span>1</span>
<span>2</span>
结果：1变红色，2不变。
原因：
* 1所在的span元素，是其父元素div的第一个子元素。同时它也是在div下面，所以被匹配。
* 2所在的span元素，它不是父元素div的第一个子元素，是第二个。不满足第二点条件。
修改一下：
<span>1</span>
<div>
<span>2</span>
<span>3</span>
</div>
结果：1和2都变成红色了
原因：
* 2所在的span，它的父元素是第二层div，而且也确实是该父元素的第一个子元素。也是在div下的。
* 但是3所在的span，不是第二层div的第一个子元素。故没有匹配。
再修改一下：
<span>2</span>
1
结果：2是红的，1不是红的。
原因：
* 1所在的span，并不是其父元素的第一个子元素。（其子元素是第一层div）
再修改一下！
<span>2</span>
<span>1</span>
结果：1变回红色了！
原因：1所在的span，其父元素是p，那么它确实是父元素的第一个子元素。而且也是在div下的。所以它是红色的。
对于 **div span:first-child** 进行总结：
1. 首先，匹配的一定是span元素
2. 再者，这个span元素得是其父元素的第一个子元素
3. 最后，符合1,2条件的span元素，得在div下。（**类似E F选择器**，F相当于span:first-child，E相当于div。E F选择器选的是E下的所有F，所以选的是div下的所有 span:first-child）
**类型3、div:first-child span**
关于类型3，和类型2可以好好比较一下。
这里直接作总结：
1. 选择的一定是span标签
2. span标签一定在**满足一定条件的div下**
3. div的条件是：div得是其父元素的第一个子元素
E是div:first-child，F是span，要找E下的所有F。
然而E就是要找div，且这个div得是其父元素的第一个子元素。
找到了这样的div，在这些div里面找所有的span标签！
[](
)伪元素
==================================================================
[](
)::first-line
---------------------------------------------------------------------------
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
* ::first-line只作用于块级元素
* 如上例，所有p元素的首行（first-line），都添加上了属性
[](
)::first-letter
-----------------------------------------------------------------------------
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
* ::first-letter只作用于块级元素
* 如上例，所有p元素的首字母（first-letter），都添加上了属性
[](
)::before
-----------------------------------------------------------------------
h1::before {
content: url(smiley.gif);
}
* ::before 伪元素可用于在元素内容之前插入一些内容。
[](
)::after
----------------------------------------------------------------------
h1::after {
content: url(smiley.gif);
}
* ::after 伪元素可用于在元素内容之后插入一些内容。
[](
)::selection
--------------------------------------------------------------------------
::selection {
color: red;
background: yellow;
}
* 匹配用户所选定的元素部分
* 可用color,background,cursor,outline
* 上例使得，被用户选择的文本，字体颜色为红色，背景变成黄色。
[](
)伪类与伪元素的区别
========================================================================
**区别：**
1. 伪类选择器都是单冒号；伪元素是双冒号。
2. 伪类选择器用于**已有元素处于某个状态**时，为其添加特定的样式（如悬停:hover，:active）；伪元素用于**创建一些不在文档树的元素**，为其添加样式，虽然可以看到这些新元素，但**并不在文档树中。**
**注意：**
现在大多数浏览器还是支持双冒号或者单冒号两种方式去表示伪元素。CSS3为了区分伪类和伪元素，**伪类用单冒号，伪元素用双冒号。**
[](
)CSS3属性选择器
========================================================================
* E\[att^=“val”\]：属性att的值以"val"开头的E元素
* E\[att$=“val”\]: 属性att的值以"val"结尾的E元素
* E\[att\*=“val”\]: 属性att的值包含"val"字符串的E元素
[](
)优先级
==================================================================
总结：
* !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
