一、通用选择器

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

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

*{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. sp_executesql 两种写法

    写法1: AlTER PROCEDURE TryAgain @ReturnValue int output AS declare @aa nvarchar(), @ForumID int, @coun ...

  2. JS算法总结

    1.选择排序: var arr = [3,6,7,2,6,4,1,6,8,24,12,53]; function sort(arr){ // 当数组的长度小于1的时候结束递归 if(arr.lengt ...

  3. MySQL单机load过高问题讨论

    有一个朋友问我: "hi,我想问下你们遇到单机load过高的情况 采取什么紧急措施啊?" 我问他是不是mysql db server? 他说是. 我给他如下建议: 1 先看下是不是 ...

  4. php分享三十三:用php中的register_shutdown_function和fastcgi_finish_request

    已前言 在php中又两个方法都是在请求快结束的时候执行.方法名分别是 register_shutdown_function和fastcgi_finish_request.虽然执行的时机差不多,但是功能 ...

  5. 解决两台centos虚拟机Telnet服务无法联机的问题

    关闭防火墙 [root@localhost ~]# service iptables stopiptables: Flushing firewall rules:                    ...

  6. 基于tiny4412的Linux内核移植 -- MMA7660驱动移植(九-2)

    作者信息 作者: 彭东林 邮箱:pengdonglin137@163.com QQ:405728433 平台简介 开发板:tiny4412ADK + S700 + 4GB Flash 要移植的内核版本 ...

  7. IOS开发UI基础UITableView的属性

    UITableView UITableView内置了两种样式:UITableViewStylePlain,UITableViewStyleGrouped <UITableViewDataSour ...

  8. Redis设计与实现-持久化篇

    redis数据库 默认16个数据库,每个数据库由一个redis.h/redisDb结构表示,此结构里的dict字典与expires字典,其中dict保存了该库所有键值对,此字典即为键空间:expire ...

  9. [Tool] PowerDesigner

    一般项目的生命周期: 1.需求分析 2.需求规格说明书 3.总体设计 4.详细设计 5.编码实现 6.测试,试运行. 7.验收 8.后期维护 PowerDesigner 可以把软件生命周期的每一个阶段 ...

  10. 在MVC视图的代码块中,直接输出文本,有几种方式?

    @{ <div>我爱IT,我是程序员,我骄傲---</div> <!--在C#代码块中,输出文本--> <!--1.0 使用Razor内置标签text--&g ...