一、通用选择器

通用选择器可能是所有选择器中最强大的,却使用最少的。通用选择器的作用就像是通配符,它匹配所有可用元素。通用选择器由一个星号表示。通用选择器一般用来对象页面上所有元素应用样式

例如:可使用,以下规则删除第个元素上的默认的空白边界

*{margin:;
padding:;
}

二、分组选择器

分组选择器不是一种选择器类型,而是一种选择器使用方法。当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码。

/*定义所有级别的标题和段落行高为22px*/
h1,h2,h3,h4,h5,h6,p{
line-height:22px;
}

分组选择器,可以使用逗号把同组内不同对象分隔。分组选择器与类选择器在性质上有点类似,都可以为不同元素或者对象定义相同的样式。

将以下样式改变

.class1{
font-size:13px;
color:red;
text-decoration:underline;
}
.class2{
font-size:13px;
color:blue;
text-decoration:underline;
}

分组选择器使用

.class1{
color:red;
}
.class2{
color:blue;
}
/*共同样式*/
.class1,class2{
font-size:13px;
text-decoration:underline;
}

分组选择器坚持以下两个原则

  • 方便原则。不能为了分组而分组,如把每个元素、对象中具有相同的声明都抽取出来分为一组,只能给自己带来麻烦。此时定义一个类会理更方便
  • 就近原则。如果几个元素相邻,并同处在同一个模块内,可以考虑把相同声明提取出来进行分组。理由便于分组,容易维护,也更容易理解

CSS 通用和分组选择器(十)的更多相关文章

  1. CSS之分组选择器和嵌套选择器

    分组选择器, 将一个样式应用于多个类,或者标签啥的 每个选择器用逗号隔开 <!DOCTYPE html> <html> <head> <meta charse ...

  2. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  3. css中所有的选择器

    认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式:    } 标签选择器 p{ font-size:12px:  line-height:1.6em;     ...

  4. HTML和CSS前端教程03-CSS选择器

    目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. ...

  5. CSS样式----css样式表和选择器(图文详解)

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  6. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  7. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  8. [读书笔记] CSS权威指南1: 选择器

    通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ bo ...

  9. CSS选择器之基本选择器总结

    一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...

随机推荐

  1. 《Programming with Objective-C》

    苹果官方文档:不稳定的传送门 读书笔记共有以下几篇,其他的知识点不重要或者已经熟悉不需记录 <Programming with Objective-C>第三章 Working with O ...

  2. 用Python开始机器学习(7:逻辑回归分类) --好!!

    from : http://blog.csdn.net/lsldd/article/details/41551797 在本系列文章中提到过用Python开始机器学习(3:数据拟合与广义线性回归)中提到 ...

  3. vmware虚拟机工具vmware tools介绍及安装排错

    VMware Tools是VMware虚拟机中自带的一种增强工具,相当于VirtualBox中的增强功能(Sun VirtualBox Guest Additions),是VMware提供的增强虚拟显 ...

  4. Apache+tomcat+mod_jk+centos6.2负载均衡集群配置--转载

    转载地址:http://blog.163.com/chenhui_java/blog/static/17267249420128101191860/ 注: 由于长期受转载毒害,所以本人日志均是原创:其 ...

  5. [python实用代码片段]python获取当前时间的前一天,前一周,前一个月

    python获取当前时间的前一天,前一周,前一个月. 实用python的datetime.timedelta方法,避免了有的月份是30和31等不同的情况. 获取前一个月的时间,方法实现:首先datet ...

  6. CSS3魔法堂:背景渐变(Gradient)

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  7. Orleans之Hello World

    接触Orleans 有一段时间了,之前也翻译了一系列官网文档,今天我们就来一个实际的例子,来看看到底如何用这个东西来开发项目,当然经典的也是醉人的,我们就从HelloWorld开始吧. 通过前面的知识 ...

  8. SQL Server 2008 FILESTREAM特性管理文件

    在SQL Server 2008中,新的FILESTREAM(文件流)特性和varbinary列配合,你可以在服务器的文件系统上存储真实的数据,但可以在数据库上下文内管理和访问,这个特性让SQL Se ...

  9. Linq专题之创建Linq查询表达式

    本节我们主要介绍一下如何创建查询集合类型,关系数据库类型,DataSet对象类型和XML类型的数据源的Linq查询表达式. 下面在实例代码ReadyCollectionData()函数创建了准备的数据 ...

  10. JavaScript执行顺序分析

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...