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> ...
随机推荐
- 快速开发~Rafy框架的初步认识
当我们开始使用EF的同时,是不是就会更好的认识了其他的ORM框架,最近接触了Rafy的使用,感觉还是蛮有兴趣去学习的,虽然最初的我到现在看的并不深入,但是我个人感觉还是可以简单地做一些总结的啦,或许语 ...
- 后端码农谈前端(CSS篇)第二课:CSS的5个来源
0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...
- DDD:群里关于验证的结论
@汤雪华 验证是为了让数据符合要求.各个层的验证是为了确保传递给各个层的数据符合当前层所需要的数据的要求. @小学僧 db model的验证主要是为了保证数据完整. domain model的验证主要 ...
- [Python] Interpreter setting in Pycharm
From: http://blog.csdn.net/u013088062/article/details/50135135 From: http://blog.csdn.net/u013088062 ...
- C#ASP.NET 通用扩展函数之 LogicSugar 简单好用
说明一下性能方面 还可以接受 循环1000次普通Switch是用了0.001秒 ,扩展函数为0.002秒 , 如果是大项目在有负载均衡的情况下完全可以无视掉,小项目也不会计较这点性能了. 注意需要引 ...
- SQL中对XML的处理
DECLARE @PreSOMasterXML XMLDECLARE @SDA VARCHAR(100)SET @PreSOMasterXML=N'<ProcessTaskRequest& ...
- 甲骨文白桃花心木P6 EPPM 8.2项目点提供样本
甲骨文白桃花心木样例代码 除非明确确定,这里的示例代码不是认证或Oracle支持;它只是用于教育或测试的目的. 你必须接受 许可协议下载此示例代码. 接受 许可协议 | 下降 许可协议 的名字 ...
- 在uwp仿制WPF的Window
移植WPF软件到uwp时碰到用作对话框的Window有多种处理选择.我个人认为最省事的是用ContentDialog模拟Window. 比如你想把上面这个WPF窗体弄到uwp里面去 1.修改Conte ...
- sql: table,view,function, procedure created MS_Description in sql server
--添加描述 geovindu --https://msdn.microsoft.com/en-us/library/ms180047.aspx --https://msdn.microsoft.co ...
- MyBatis插入语句返回主键值
插入语句xml代码: <insert id="insertUser" parameterType="com.spring.mybatis.po.User" ...