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选择器之通配符选择器和多元素选择器的更多相关文章

  1. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  2. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  3. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  4. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  5. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  6. css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

  7. H5 14-后代选择器和子元素选择器

    14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. day66-CSS伪类选择器和伪元素选择器

    1. 伪类选择器:hover 和 focus 比较常用. 1.1 hover:把鼠标移动到内容迈腾2020款TSI DSG舒适型的时候,字体变成了红色. html: <body> < ...

  9. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

随机推荐

  1. THUSC2016 游记

    浑浑噩噩地就出发了,只记得可以翘课,不知道自己要干什么去. Day 0    5点起床,到潮汕机场坐飞机.第一次坐飞机非常不爽起飞和降落时的加速度……终于还是转转地铁.动车在下午4点左右抵达目的地,西 ...

  2. 基于Windows下python环境变量配置

    方法和Java环境变量配置是一样的,不懂的请移步这里 虽然这样说,还是唠唠叨叨几句吧QAQ 默认情况下,在windows下安装python之后,系统并不会自动添加相应的环境变量.此时不能在命令行直接使 ...

  3. STOI补番队互测#2

    Round2轮到我出了>_<(目测总共10人参加 实际共七人) 具体情况: #1: KPM,360 #2:ccz181078,160 #3:child,150 可惜KPM没看到第一题样例里 ...

  4. LightOJ DNA Prefix(字典树+dfs)

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=121897#problem/F F - DNA Prefix Time Limit:200 ...

  5. c#版 K线控件（Stock）

    K线起源于日本米市交易,它的基本用途就是为了寻找"买卖点".股市及期货市场中的K线图的画法包含四个数据,即开盘价.最高价.最低价.收盘价,所有的k线都是围绕这四个数据展开,反映大势 ...

  6. Cxf -wsdl2java 使用参数介绍

    wsdl2java -h 可以得到详细的参考文档: G:\cxf\apache-cxf-3.1.6\bin>wsdl2java -h wsdl2java -fe|-frontend <fr ...

  7. Android回顾系列——之HttpUrlConnect的使用

    写在前面: 最近准备一个关于Android的比赛.由于赛项要求,不得使用第三方工具.框架:故最近来温习一下Google官方提供的原始API的使用. 说实话,用惯了第三方的库,再回过头来用原生的api的 ...

  8. WPF 文本滚动效果 渐变效果

    <DockPanel> <StackPanel DockPanel.Dock="Bottom" VerticalAlignment="Bottom&qu ...

  9. Bad Request (Invalid Hostname)什么意思？ 200

    一般来说与你电脑无关 错误请求(无效主机名) 域名已绑定主机 但主机未绑定域名就会出现这种情况! 总结页面出现Bad Request (Invalid Hostname)的原因: 1.如果确定域名已经 ...

  10. vi命令加行号查找替换等命令

    一.加行号           : set nu二.vi查找:    当你用vi打开一个文件后,因为文件太长,如何才能找到你所要查找的关键字呢?在vi里可没有菜单-〉查找,              ...