CSS 通用和分组选择器(十)
一、通用选择器
通用选择器可能是所有选择器中最强大的,却使用最少的。通用选择器的作用就像是通配符,它匹配所有可用元素。通用选择器由一个星号表示。通用选择器一般用来对象页面上所有元素应用样式
例如:可使用,以下规则删除第个元素上的默认的空白边界
*{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 通用和分组选择器(十)的更多相关文章
- CSS之分组选择器和嵌套选择器
分组选择器, 将一个样式应用于多个类,或者标签啥的 每个选择器用逗号隔开 <!DOCTYPE html> <html> <head> <meta charse ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- css中所有的选择器
认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式: } 标签选择器 p{ font-size:12px: line-height:1.6em; ...
- HTML和CSS前端教程03-CSS选择器
目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. ...
- CSS样式----css样式表和选择器(图文详解)
本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- [读书笔记] CSS权威指南1: 选择器
通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ bo ...
- CSS选择器之基本选择器总结
一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...
随机推荐
- Understanding G1 GC Logs--转载
原文地址:https://blogs.oracle.com/poonam/entry/understanding_g1_gc_logs Understanding G1 GC Logs By Poon ...
- tar的-t参数使用
-t, --list list the contents of an archive 例如: pengdl@localhost:~/test$ tar -czvf shell.ta ...
- debian系统root用户登录
Debian默认不允许root登录,所以修改之. 让Debian以root登录 1).首先修改gdm3的设定文件(/etc/gdm3/deamon.conf),在[security]字段后面追加如下一 ...
- GitBook – 使用 GitHub 和 Markdown 制作书籍
GitBook 是一个命令行工具(也是 Node.js 库),让你能够使用 GitHub/Git 和 Markdown 构建出美丽的编程书籍,可以包含互动的练习.GitBook 支持使用多种语言构建书 ...
- 结对编程之Fault、Error、Failure
1.结对说明 结对对象:刘世麟 博客地址:http://www.cnblogs.com/liushilin/ 双方贡献:1:1 2.题目要求 构造程序,分别是: •不能触发Faul ...
- PHP去除BOM头的方法
BOM头是UTF-8来告诉编辑器:我是UTF8编码.它的编码是\xEF\xBB\xBF 但是PHP在设计之初并没有考虑到BOM头的问题,所以在编解码的时候很容易出现问题 比如今天遇到的问题,jso ...
- 安装percona-xtrabackup一直提示依赖冲突的一个解决办法
我的Mysql是5.6版本,通过自己下载的rpm包执行安装: yum instal percona-xtrabackup-2.1.7-721.rhel6.x86_64.rpm 会出现如下的安装错误提示 ...
- C#使用基类的引用 and 虚方法和覆写方法
结论:使用基类的引用,访问派生类对象时,得到的是基类的成员. 虚方法和覆写方法
- P6 EPPM 安装与配置指南 16 R1 2016.4
关于安装和 配置P6 EPPM 本指南告诉你如何自动 安装和配置您的应用程序. 在您开始之前,阅读 先决条件 P6 EPPM配置 (7页). 安装P6 EPPM 您将使用 安装程序 (窗口) . ...
- Winform开发框架之客户关系管理系统(CRM)的开发总结系列2-基于框架的开发过程
在上篇随笔<Winform开发框架之客户关系管理系统(CRM)的开发总结系列1-界面功能展示>中介绍了我的整个CRM系统的概貌,本篇继续本系列的文章,介绍如何基于我的<winform ...