CSS2.1大纲梳理（1）

元素

替换元素和非替换元素

替换元素

用来替换元素的内容并非由文档内容直接表示。
如：img、input、textarea、 select等。

非替换元素

其内容由用户代理（通常是浏览器）在元素本身生成的框中进行显示。
如：div、span和h1等元素。

块级元素和行内元素

块级元素

块级元素生成一个元素框，它会填充父元素的内容区，旁边不能有其他元素。如：

和

行内元素

行内元素是在一个文本行内生成元素框，这些元素不会在它们之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不破坏其显示。如：
和

引入CSS

link标记

以上是link常用的属性，link还有一个media属性，可以用于在不同的显示设备上显示不同的效果。
同时，link的title属性用于向用户提供一个可选的样式，用户可以在浏览器的菜单中（如果浏览器支持）选择自己想要使用的样式表。

style元素

@import指令

将@import放在style块中时，必须确保它（们）在style中最靠前的位置。

内联样式

选择器

元素选择器

文档的元素就是选择器本身。如：
body {...}
h1 {...}

通配符

“*”用于匹配所有元素。如：
* {font-size: 12px;}

类选择器

通过元素标签中的“class”属性进行选择。如：
元素：

选择器：.my-own-style {...}

ID选择器

通过元素ID进行选择。如：
元素：

选择器：#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"]可以用于选择以下元素：

文档结构选择器

父子元素：在文档结构树上紧邻的两层所构成的层次包含（继承）关系。
后代元素：在文档结构树中存在继承关系，但是这些节点可能不处于直接相邻的两层。如爷爷与孙子、爷爷与曾孙子之间的关系。当然，父子关系也属于后代关系的一种。

后代选择器

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提供的选择器。

思考：

对于

    
First
    
Second
    
Third
    
Forth

下面两种选择器各是什么效果？

1、

li.active + li {
    font-weight: bold;
}

2、

li + li {
    font-weight: bold;
}

相邻元素选择器测试

伪类和伪元素

伪类

伪类是一种“假想”的类，通常情况下，你都无法在HTML代码中找到有任何地方显示地指定了某个元素为一个伪类。如，你不会看到一个链接具有以下的样式：link。这种写法虽然为锚指定了一个类，但是这个类是一个具体的visited类，而非我们想要的:visited伪类。
目前，CSS中主要有以下几个伪类：link、visited、focus、hover、active、first-child和lang等。
在CSS中，伪类的顺序很重要，推荐的顺序为link->visited->focus->hover->active，大家可以思考一下为什么会推荐这样的顺序。
此外，还需要特别注意first-child的用法，因为该伪类与大家所见到的字面意思有一些的出入。请大家思考一下，以下代码最终选择到的是哪些元素？

     
        
    
    
        

          
父选项-1
          
父选项-2
             

                
子选项-1
                
子选项-2
                
子选项-3
             
          
          
父选项-3
        
    

伪元素

文档中的一种假想元素，该元素在文档中并无实体标签与其对应。

label[required]:after {/*注：CSS3中，应该为::after*/
    content: "*";
    color: red;
}

将会使以下代码产生一般的“必填”项的效果：

Name

使用伪元素达到简单的必填表单效果

也可以使用伪元素实现计数器的功能。

元素
字体
定位

这样，不用加入任何的JavaScript代码，就可以完成计数器功能。上面的代码段可以得到以下效果：

伪元素计数效果

简单写一句放，展示一下效果。

使用伪元素添加内容

再加一些样式，便可达到更好的效果。

使用伪元素添加内容