本文详细介绍了CSS中的各类选择器，包括元素选择器、ID选择器、类选择器等，并提供了实际应用示例。
1.元素选择器
作用：通过元素选择器可以通过标签名选中页面中指定的所有元素
语法：
标签名{
} 例子：
<style type="text/css">
p{
color:red;
font-size;
}
</style>
<body>
<p>这是p标签</p>
<body>
2.id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：
id属性值{
}
3.类选择器
我们可以为每个元素设置class属性，class属性和id属性类似，只不过class属性可以重复，拥有相同class属性值的元素，我们说他们是一组元素。
作用：通过元素的class属性值选中一组元素
语法：
.class属性值{
}
4.选择器分组（并集选择器）
作用：选择器分组可以同时设置多个选择器对应的元素
语法:
选择器1，选择器2，选择器3，选择器N{
}
5.复合选择器（交集选择器）
作用：选择器分组可以同时设置多个选择器对应的元素
语法:
选择器1，选择器2，选择器3，选择器N{
}
例子：
6.通配选择器
作用：它可以选中页面所有的元素
语法：
作用：
*{
}
7.伪类选择器
伪类专门用来表示元素的一种特殊的状态，比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框。当我们需要为处在这种特殊状态的元素设置样式时，就可以使用伪类。
（1）:link
表示普通的链接（没访问过的链接）
a:link{
color:red;
}
（2）:visited
表示访问过的链接
a:visited{
color:skyblue;
}
浏览器通过历史记录来判断链接是否被访问，由于涉及到用户的隐私问题，visited只能设置字体的颜色。
（3）:hover
表示鼠标移入的状态
a:hover{
color:black;
}
（4）:active
表示链接被点击的状态
a:active{
color:green;
}
IE6中，不支持对超链接元素以外的元素设置hover和active。
（5）input:focus
文本框获取焦点
input:focus{
background:red;
}
（6）p::selection
为p标签中选中的内容使用样式
p::selection{
}
//兼容火狐浏览器
p::-moz-selection{
}
扫一扫
1508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
