CSS选择器之通配符选择器和多元素选择器
1.通配符选择器
如果希望所有的元素都符合某一种样式，可以使用通配符选择器．
基本语法：
*{margin:0; padding:0}
可以让所有的html元素的外边距和内边距都默认为0.
写一段html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>hello world</p>
</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>
<p>hello world</p>
</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>
<span class="span1">黄鹤楼送孟浩然之广陵</span><br>
<span class="span1">故人西辞黄鹤楼</span><br>
<span class="span2">烟花三月下扬州</span><br>
<span class="span3">孤帆远影碧空尽</span><br><br>
<span class="span4">唯见长江天际流</span><br>
</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>
<span class="span1">黄鹤楼送孟浩然之广陵</span><br>
<span class="span1">故人西辞黄鹤楼</span><br>
<span class="span2">烟花三月下扬州</span><br>
<span class="span3">孤帆远影碧空尽</span><br><br>
<span class="span4">唯见长江天际流</span><br>
</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>
<span class="span1">黄鹤楼送孟浩然之广陵</span><br>
<span class="span1">故人西辞黄鹤楼</span><br>
<span class="span2">烟花三月下扬州</span><br>
<span class="span3">孤帆远影碧空尽</span><br><br>
<span class="span4">唯见长江天际流</span><br>
</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>
<span class="span1">黄鹤楼送孟浩然之广陵</span><br>
<span class="span1">故人西辞黄鹤楼</span><br>
<span class="span2">烟花三月下扬州</span><br>
<span class="span3">孤帆远影碧空尽</span><br><br>
<span class="span4">唯见长江天际流</span><br>
</body>
</html>
刷新浏览器后，显示的效果如下：
可以看到span3标签里的属性覆盖了span1里的颜色设置．
关于组合选择器的多元素选择器的说明：
1.为了代码简洁，可以把各个选择器的共同的样式写在一起，做成多元素选择器
2.如果样式发生了冲突，以写在后面的样式为准．CSS选择器之通配符选择器和多元素选择器的更多相关文章
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器
最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...
- H5 14-后代选择器和子元素选择器
14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- day66-CSS伪类选择器和伪元素选择器
1. 伪类选择器:hover 和 focus 比较常用. 1.1 hover:把鼠标移动到内容迈腾2020款TSI DSG舒适型的时候,字体变成了红色. html: <body> < ...
- CSS选择器之伪类选择器（伪元素）
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
随机推荐
- python写外网收集信息器
简单化,知道IP去扫描ip import socket from socket import * a=input('请输入域名:') try: ip=gethostbyname(a) print('[ ...
- Hadoop（十）Hadoop IO之数据完整性
前言 上一篇我分享了Hadoop的压缩和编解码器,在我们开发的过程中其实是经常会用到的,所以一定要去掌握.这一篇给大家介绍的是Hadoop的数据完整性! Hadoop用户在使用HDFS储存和处理数据不 ...
- Codeforces Round #336 (Div. 2)【A.思维，暴力，B.字符串，暴搜，前缀和，C.暴力，D，区间dp，E，字符串,数学】
A. Saitama Destroys Hotel time limit per test:1 second memory limit per test:256 megabytes input:sta ...
- poj_3281Dining（网络流+拆点）
poj_3281Dining(网络流+拆点) 标签: 网络流 题目链接 题意: 一头牛只吃特定的几种食物和特定的几种饮料,John手里每种食物和饮料都只有一个,问最多能够满足几头牛的需求(水和食物都必 ...
- Eclipse集成Tomcat的步骤，我已测试N次都是成功的
本文转自:https://www.cnblogs.com/weixing/p/3229983.html#undefined 使用Eclipse开发B/S结构Web应用时,必须使用Web应用服务器,常见 ...
- 010 有顺序的Map的实现类：TreeMap和LinkedHashMap
作者:nnngu GitHub:https://github.com/nnngu 博客园:http://www.cnblogs.com/nnngu 简书:https://www.jianshu.com ...
- 访问远程MySQL数据库的方法
请问各位部署LAMP的时候MySQL是独立出来的服务器,在apache上编译安装php的时候有个--with-mysql后面应该是带mysql路径的,可我应该怎样把这个连接到mysql服务器,因为不是 ...
- Tomcat下的Server.xml配置文件详解
自15年毕业到现在已经入行两年多了,一直以来没有深入的了解过tomcat的详细配置,只懂修改一下端口号.在网上找了些相关资料来支撑这篇文章,深入了解server.xml文件各配置的作用 <?xm ...
- Java中的对象Object方法之---wait()和notifiy()
这一篇咋们继续,接着来介绍wait()和notify()方法,我们都知道这两个方法和之前介绍的方法不太一样,那就是这两个方法是对象Object上的,不属于Thread类上的.我们也知道这两个方法是实现 ...
- Java数据持久层框架 MyBatis之背景知识二
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...