最近在学习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