CSS选择器之通配符选择器和多元素选择器

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS选择器之通配符选择器和多元素选择器1.通配符选择器
如果希望所有的元素都符合某⼀种样式，可以使⽤通配符选择器．
基本语法：
*{margin:0; padding:0}
可以让所有的html元素的外边距和内边距都默认为0.
写⼀段html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
hello world
</body>
</html>
⽤浏览器打开后，效果跟下⾯⼀样：
这个时候想让字体距离浏览器的边距为0时，就可以使⽤通配符选择器了．
修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
hello world
</body>
</html>
⽤浏览器打开后的效果如下：
可以看到字体距离浏览器的边距差不多为0了．
2.组合选择器
在css⽂件中，组合选择器可以是id选择器，类选择器，html标签选择器等　实例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1{
color:red;
font-weigth:bold;
}
.span2{
color:red;
font-weight:bold;
font-size:30px;
}
.span3{
color:red;
font-weight:bold;
font-size:50px;
background-color:silver;
}
.span4{
color:red;
font-weight:bold;
font-size:50px;
background-color:silver;
font-family:"微软雅⿊";
}
</style>
</head>
<body>
黄鹤楼送孟浩然之⼴陵 
故⼈西辞黄鹤楼 
烟花三⽉下扬州 
孤帆远影碧空尽 
唯见长江天际流 
</body>
</html>
刷新浏览器后显⽰的效果如下：
虽然达到了效果，但是所⽤到的代码太烦杂了，可以使⽤更好的办法．
修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1,.span2,.span3,.span4{
color:red;
font-weight:bold;
}
.span2{
font-size:30px;
}
.span3{
font-size:50px;
background-color:silver;
}
.span4{
font-size:50px;
background-color:silver;
font-family:"微软雅⿊";
}
</style>
</head>
<body>
黄鹤楼送孟浩然之⼴陵 
故⼈西辞黄鹤楼 
烟花三⽉下扬州 
孤帆远影碧空尽 
唯见长江天际流 
</body>
</html>
刷新浏览器，看到的效果跟上⾯的是⼀样的．
现在想要把⽹页中所有的字体颜⾊都变成绿⾊的，就只⽤修改⼀⾏代码就可以了．修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1,.span2,.span3,.span4{
color:green;
font-weight:bold;
}
.span2{
font-size:30px;
}
.span3{
font-size:50px;
background-color:silver;
}
.span4{
font-size:50px;
background-color:silver;
font-family:"微软雅⿊";
}
</style>
</head>
<body>
黄鹤楼送孟浩然之⼴陵 
故⼈西辞黄鹤楼 
烟花三⽉下扬州 
孤帆远影碧空尽 
唯见长江天际流 
</body>
</html>
修改后的效果如下：
现在再来修改代码，在span2这个类标签中添加⼀个颜⾊属性，其值为红⾊的，效果会怎么样呢？？修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1,.span2,.span3,.span4{
color:green;
font-weight:bold;
}
.span2{
font-size:30px;
color:red;
}
.span3{
font-size:50px;
background-color:silver;
}
.span4{
font-size:50px;
background-color:silver;
font-family:"微软雅⿊";
}
</style>
</head>
<body>
黄鹤楼送孟浩然之⼴陵 
故⼈西辞黄鹤楼 
烟花三⽉下扬州 
孤帆远影碧空尽 
唯见长江天际流 
</body>
</html>
刷新浏览器后，显⽰的效果如下：
可以看到span3标签⾥的属性覆盖了span1⾥的颜⾊设置．
关于组合选择器的多元素选择器的说明：
1.为了代码简洁，可以把各个选择器的共同的样式写在⼀起，做成多元素选择器
2.如果样式发⽣了冲突，以写在后⾯的样式为准．。