Web前端新人之CSS样式选择器

最近在学习css样式。那么我就想先整理一下css样式的选择器

规则结构：

每个规则都有两个基本部分：选择器和声明块。声明块由一个或者多个声明组成，每个声明则是一个属性—值对(property-value)

1、元素选择器

*　　  　　通用元素选择器，匹配任何元素　　*{margin:0;padding:0};

x　　  　　标签选择器　　h1{color:#000},p{color:#000};

.info　　　class选择器　　.info{background-color:red};

#target　 ID选择器　　#target{font-size:15px};

2、选择器分组

x,y　　　　多元素选择器　　x,y{font-weight:bold};

x y　　　　后代选择器　　　x y{display:inline};

x>y　　　 子元素选择器　　x>y{color:#333};

x+y　　　 相邻元素选择器　x+y{color:#ddd};

说明：

还有个更为高级的CSS选择器模块，早在CSS2完成之后就发布了。其中包含更多的部分值属性选择器又称之为“子串匹配属性选择器”。

3、子串匹配属性选择器

[x^=“y”]  选择属性以x开头的y的所有元素;
[x$=“y”]  选择属性以x结尾的y的所有元素;
[x*=“y”]  选择属性以x包含子串的y的所有元素;

4、伪类选择器

:link　　　指示为超链接(有一个href属性)并指向一个未访问地址的所有锚链接。

:visited　 指示为已访问的地址超链接所有的锚链接

5、动态伪类

:focus　　指示为当前拥有输入焦点的元素。也就是可以接受键盘输入或者可以以某种方式激活的元素；

:hover　　指示为鼠标指针停留在某个元素上。例如鼠标停留在超链接上。字体会由黑色变为红色；

:active　　指示为被用户输入激活的元素。例如鼠标指针在超链接上后。当用鼠标点击这个链接后。就会激活这个:active