元素选择器
作用:通过元素选择器可以选择页面中的所有指定元素
语法:标签名{}
p{ color:red; } h1{ color:red; }
id选择器
作用:通过元素的id属性值选中唯一的一个元素
语法:#id属性值{}
/*#p1{ font-size: 20px; }*/
类选择器
作用:通过元素的class属性值选中一组元素
语法:.class属性值{}
.p2{ color: red; }
选择器分组(并集选择器)
作用:通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器n{}
/* #p1, .p2, h1{ background-color: red; }
统配选择器
作用:可以用来选中页面中的所有元素
语法 *{}
*{ color: red; }
复合选择器(交集选择器)
作用:可以选中同时满足多个选择器的元素
语法:选择器1选择器2选择器n{}
span.p3{ background-color: yellow; }
后代元素选择器
作用:选中指定元素的指定后代元素
语法:祖先元素 后代元素{}
/*#d1 span{ color: red; }*/
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器
div > span{ background-color: red; }
伪类选择器
为没访问过的链接设置一个颜色为绿色
a:link{ color: red; font-size: 50px; }
为访问过的链接设置一个颜色
:visited 表示访问过的链接浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题,所有使用visited伪类只能设置字体的颜色
a:visited{ color:red; }
设置鼠标移入的状态
a:hover{ color:red; }
设置超链接被点击的状态
a:active{ color: black; }
网友评论