CSS3 学习+实践（一）

最近感觉css学习的知识点有点乱，蹭这个机会总结一下。

对于web开发者来说，css就是用来渲染html的语言，渲染相对应用的元素，那么这样我们选择相应的元素就很重要了。

CSS选择器

1：基本选择器（这是我们常用的部分）；

2：属性选择器；

3：伪类选择器

一：基本选择器

这部分基本就是我们经常使用的：类选择器(.class); ID选择器(#id); 通配符选择器(*); 元素选择器(E);

后代选择器(E F)：选择了E元素的所有后代F元素,不论F在E中有多少层关系，都将被选中,包含关系;

                          

子元素选择器(E>F)：子元素选择器E > F，其中F仅仅是E的子元素而以。

                    

相邻兄弟元素选择器(E + F) :相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素;IE6不支持这个选择器

         

通用兄弟选择器（E ~ F): 这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选中所有Ｅ元素后面的Ｆ元素  IE6不支持这种选择器的用法

        

群组选择器:群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

二：属性选择器

属性选择器：其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

 

CSS3的属性选择器主要包括以下几种：

1. E[attr]：只使用属性名，但没有确定任何属性值；
2. E[attr="value"]：指定属性名，并指定了该属性的属性值；
3. E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
4. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
5. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
6. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
7. E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

~：表示几个以空格隔开的属性值中包含了“value”        ^:以value开头的值           $:以value结尾的值           *：包含了value的值       |： 以value或value-开头

               

 

         

 七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。

IE6不支持属性选择器。