通用选择器(通配符选择器):使用*表示,选中文档中的所有元素
--------------对文档标签的初始化
*{
属性:属性值;
属性:属性值;
}
标签指定式选择器(交集选择器):由元素选择器和id选中器或者类选择器构成 必须连写不能有空格 :div.hd(类),div#logo(id选择器)
元素选择器.类选择器{
属性:属性值;
属性:属性值;
}
元素选择器#id选择器{
属性:属性值;
属性:属性值;
}
群组选择器(并集选择器):两个及两个以上的任意选择器构成,不同的选择器之家使用,分开 ----------------集体声明
选择器1,选择器2,选择器3{
属性:属性值;
属性:属性值;
}
后代选择器(包含选择器):两个及两个以上的任意选择器构成,不同的选择器之家使用空格分开 ----------------上下文
选择器1必须包含选择器2 选择器2必须包含选择器3
选择器1 选择器2 选择器3{
属性:属性值;
属性:属性值;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
div a{
color: red ;/*这里的a链接全都被选中*/
}
</style>
</head>
<body>
<div>
<p>
<a href="#">
大学。这里的a链接和div不是父子关系,是后代关系
</a>
</p>
</div>
<div>
<a href="#">
大学里面的学院大学。这里的a链接和div是父子关系--父子关系也是特殊的后代关系
</a>
</div>
</body>
</html>
子元素选择器:两个及两个以上的任意选择器构成,不同的选择器之家使用>分开 ----------------父子关系
选择器2 的元素必须选择器1的直接子元素
选择器1 >选择器2 {
属性:属性值;
属性:属性值;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
div>a{
color: red ;/*这里的子类a链接被选中*/
}
</style>
</head>
<body>
<div>
<p>
<a href="#">
大学。这里的a链接和div不是父子关系,是后代关系
</a>
</p>
</div>
<div>
<a href="#">
大学里面的学院大学。这里的a链接和div是父子关系--父子关系也是特殊的后代关系
</a>
</div>
</body>
</html>