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. BZOJ:4031: [HEOI2015]小Z的房间

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1103  Solved: 536[Submit][Status][Discuss] Descripti ...

  2. SSH防爆破脚本

    github地址:https://github.com/demonxian3/LittleScript/blob/master/SSHprotecter.sh 使用方法: 1.给足脚本权限,chmod ...

  3. flume1.8 Interceptors拦截器（五）

    1. Flume Interceptors Flume有能力修改/删除流程中的events.这是在拦截器(interceptor)的帮助下完成的.拦截器(Interceptors)是实现org.apa ...

  4. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  5. 遍历数组中的元素（含es6方法）

    假如有这样一个数组.arr = [12,34,45,46,36,58,36,59],现在要遍历该数组. 方法1:以前我们可能会这样做: for(var i=0;i<arr.length;i++) ...

  6. Java入门篇（六）——类和对象

    写到这里终于写到了入门篇的最后一个知识点了.类和对象是Java中经常被提到的两个词汇,实际上可以将类看作对象的载体,它定义了对象所具有的功能.Java是面向对象的语言,因此掌握类与对象是学习Java语 ...

  7. PHP网站常见安全漏洞，及相应防范措施总结

    目前,基于PHP的网站开发已经成为目前网站开发的主流,本文笔者重点从PHP网站攻击与安全防范方面进行探究,旨在减少网站漏洞,希望对大家有所帮助! 一.常见PHP网站安全漏洞 对于PHP的漏洞,目前常见 ...

  8. Eclipse配置maven环境

    一.什么是maven? Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个 ...

  9. pthread_cond_wait的spurious wakeup问题

    最近在温习pthread的时候,忽然发现以前对pthread_cond_wait的了解太肤浅了.昨晚在看<Programming With POSIX Threads>的时候,看到了pth ...

  10. forward和redirect

    Forward和Redirect代表了两种请求转发方式:直接转发和间接转发. 直接转发方式(Forward),客户端和浏览器只发出一次请求,Servlet.HTML.JSP或其它信息资源,由第二个信息 ...