CSS选择器总结

CSS样式的描述包括两部分：即选择器和样式内容。

选择器：描述样式施加到哪些目标，或者说是根据某个依据来选择应用样式。

样式内容：以键值对形式描述样式的细节，比如字体大小、颜色、高度等等。

根据选择依据的不同，就产生了各种不同的选择器。

元素选择器：按照标签（元素）的名称来选择相应的目标。

代码示例：div{      background-color:#aaa;}

id选择器：根据元素的id名来选择，比如下面的例子就是选中“id=tt”的目标。

代码示例：#tt{      background-color:#Aaa;}

类选择器：根据元素的class属性名来选择，比如下面的示例的选择器选中class=“tt”的目标。

代码示例： .tt{      background-color:#Aaa;}

属性选择器：根据属性的特征来选择应用样式的目标，前面所讲的id选择器，class选择器，其实也属于属性选择器

这个示例选中type属性为text的表单元素 input[type="text"]{           height:35px;           width:125px;             }

属性选择器的书写格式为：

[title]:：选择设置了title属性的元素。

[title="tt"]： 选择title属性值为tt的元素。

[title^="tt"]： 选择了title属性值以tt开头的元素。

[title$="tt"]：选择title属性值以tt结尾的元素。

[title~="tt"]：  选择title属性值包含完整tt单词的元素。

[title*="tt"]： 选择title属性值包含tt的元素。

有可能以上书写格式会比较难记忆，但是不重要，也不需要记忆，用的多了，自然就记得住，记不起来的也可以百度一下就可以了

关系选择器：根据元素间的家族关系来选择目标。

A  B：在选择器A中，选择所有B元素，B可以是元素选择器、id选择器、class选择器、属性选择器。注意：A包含B，A与B之间用空格隔开，否则会出错。

A，B：多个元素选择，同时匹配所有A，B元素，A与B之间用逗号间隔。

A＞Ｂ：子元素选择器，匹配所有A元素的子元素B。

A＋B：毗邻元素选择器，匹配紧随A元素之后的同级元素B，兄弟元素。

A~B：匹配A元素所有的同级元素，兄弟元素。

伪类、伪元素选择器：

伪元素：其效果与增加一个元素来实现的效果等价，故称之为伪元素。

伪类：其效果与增加一个类来实现的效果等价，故称之为伪类。

常见的伪元素、伪类选择器详情请参见本人博客：http://blog.csdn.net/zhuxiandan/article/details/75248524

（完）若内容有不当或出错之处，欢迎留言骚扰。