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> ...
随机推荐
- codeforces B. Friends and Presents(二分+容斥)
题意:从1....v这些数中找到c1个数不能被x整除,c2个数不能被y整除! 并且这c1个数和这c2个数没有相同的!给定c1, c2, x, y, 求最小的v的值! 思路: 二分+容斥,二分找到v的值 ...
- NOP登录验证管理
截取Nop登录代码如下: 其实 public ActionResult Login(LoginModel model, string returnUrl, bool captchaValid) { / ...
- Nginx: could not build the server_names_hash 解决办法
# /etc/init.d/nginx reload * Reloading nginx configuration nginx [fail] # nginx -t nginx: [emerg] co ...
- 『创意欣赏』20款精致的 iOS7 APP 图标设计
这篇文章给大家分享20款精致的 iOS7 移动应用程序图标,遵循图形设计的现代潮流,所有图标都非常了不起,给人惊喜.通过学习这些移动应用程序图标,设计人员可以提高他们的创作,使移动用户界面看起来更有趣 ...
- 创意设计展示:折叠效果在移动 App 中的应用
在今天在移动 App 界面设计中,你可以看到不同创意类型的视觉效果.特别是在 Dribbble 上面,有有很多应用程序的 UI 概念设计,让你惊叹.当然,他们大多只是作为一个概念设计,可能永远也不会成 ...
- 说说Web API数据格式化——Json
题外话 一同事离职了,我去上厕所的路上正巧碰到他办完离职手续出来,抱着他的全部家当,最值钱的可能就是那个两块钱的蓝色杯子和手中的雨伞了.在一块儿走向厕所的长长楼道里,我对他说:丫的,你是不是找到别的发 ...
- error LNK1281: 无法生成 SAFESEH 映像 LNK2026 模块对于 SAFESEH 映像是不安全的 VS2015 /win10
平台 VS2015 /win10 错误 LNK1281 无法生成 SAFESEH 映像. 错误 LNK2026 模块对于 SAFESEH 映像是不安全的. 将 release 改成 debug
- [CLR via C#]14. 字符、字符串和文本处理
一.字符 在.NET Framewole中,字符总是表示成16位Unicode代码值,这简化了国际化应用程序的开发. 每个字符都表示成System.Char结构(一个值类型) 的一个实例.System ...
- AC自动机---病毒侵袭
HDU 2896 题目网址: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110773#problem/B Description 当太 ...
- AC自动机---Keywords Search
题目网址:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110773#problem/A Description In the moder ...