CSS 类选择器(四)
一、类选择器
类选择用使用"."(英文点号）进行标识，后面紧跟类名
如：
.red{color:red;}
类样式可以应用于文档中的多个元素，这体现了CSS代码的可重用性，帮助用户简化页面控制。
二、类选择器与标签选择器
类选择器和标签选择器都具有一对多的特性，即一个样式可以控制多个元素对象的显示效果。
注意事项：
- 与标签选择器相比，类选择器具有更好的适应性和灵活性，因为可以指定类的样式所应用的元素对象范围
- 与类选择器相比，标签选择器具操作简单、定义方便的优势，因为不需要为每个元素都定义相同的class属性，而使用类选择器之前，需要在HTML文档中为要应用类样式的元素定义class属性，这亲就显示重比较麻烦。
- 标签选择器适合为元素定义全局显示属性，而类选择器，更适合定义类样式，定义了标签选择器的样式之后，肯定会对页面中同一个元素产生影响，而类选择器定义的样式会出现不被应用的情况，具有更大的机动性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类选择器</title>
<link type="text/css" rel="stylesheet" href="css/demo4.css"/>
</head> <body>
<div></div>
<div class="red"></div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
div{
width:400px;
height:200px;
background-color:blue;
} .red{background-color:red;}
结果:
三、类选择器与ID选择器
类选择器与ID选择器除了应用范围不同外，它们的优先级也不同，在同等条件下ID选择器比类选择器具有更大的优先权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类和伪对象选择器</title>
<link type="text/css" rel="stylesheet" href="css/demo4.css"/>
</head> <body>
<div id="text" class="red"></div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
div{
width:400px;
height:200px;
}
#text{
background-color:blue;
}
.red{background-color:red;}
div将显示为蓝色
一般来讲：
ID选择器：应用用体现文档的结构和位置，如#header,#footer,#left等，
类选择器：class属性就应该体现名称的样式描述性，使一看类名就了解要定义的样式，如.red,定义一个红色的类,.underline定义一个下划线的类等
CSS 类选择器(四)的更多相关文章
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
- CSS 类选择器
在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...
- CSS系列（7）CSS类选择器Class详解
这一篇文章,以笔记形式写. 1, CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1) 使用类选择 ...
- css 类选择器结合元素选择器和多类选择器
1.结合元素选择器 <p class="important">css</p> p.important {color: red} 匹配class属性包含imp ...
- css类选择器类名覆盖优先级
code <style> .a{ background: red; } .b{ background: yellow; } </style> <div class=&qu ...
- CSS类选择器
CSS 选择器参考手册 还是 .class #id element 用的最多! 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指 ...
- css类选择器中 空格 逗号 啥都不填的区别及其他笔记
.a.b 代表 一个元素上 同时 有 a 类 和 b 类 .a .b (中间有空格) 代表 .b 是 .a 的子元素选择. .a,.b 代表 class='a' 和 class='b' 都会被选择上.
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS一个元素同时使用多个类选择器（class selector）
CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...
随机推荐
- mysql中int、bigint、smallint 和 tinyint的区别详细介绍
1 bytes = 8 bit ,一个字节最多可以代表的数据长度是2的8次方 11111111 在计算机中也就是 -128到127 1.BIT[M] 位字段类型,M表示每个值的位数,范围从1到64,如 ...
- Tips1:用 Export Package选项来分享你的成果
如果你不是一个人工作,你可能需要和其他人共享一个工程文件,Unity工程文件中的一些关键元素默认是隐藏的,因此通过复制Assets文件夹的方法并不完善.Unity自带的UnityPackage格式的文 ...
- Node.js建站笔记-使用react和react-router取代Backbone
斟酌之后,决定在<嗨猫>项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现. react拥有丰富的组件,虽然不如Back ...
- Tools - Windows
1)文本操作 Ctrl + C / Ctrl + V / Ctrl + X / Ctrl + Z / Ctrl + A:复制/粘贴/剪贴/撤销/全选. 2)窗口左右分屏 Win + 方向键:上(最大化 ...
- 开放产品开发（OPD）：产品负责人的工作原则和方法
月26日我将在2014 WOT全球软件技术峰会做相关的一个主题演讲[产品负责人的工作原则和方法],个原则和相应的一些方法. 以下是本次分享内容: 完整版如下,如果你喜欢想下载的话,点击 http:// ...
- 开放产品开发（OPD）：Archi 汉化工具下载
本文更新版本已挪至 http://www.zhoujingen.cn/blog/3378.html ------------------------------ 在OPD中,我们使用了ArchiMa ...
- IT人的自我导向型学习：学习的3个维度
看到大家对我的文章赞了不少,看来大家还比较喜欢看.园子里的一些朋友和我说:”终于又看到你要在园子里发原创文章了.几年前就受益匪浅,经过几年的成长分享来的东西肯定也是精品.“ 感谢大家对我的信任,如果你 ...
- Windows及Linux平台下的计时函数总结
本文对Windows及Linux平台下常用的计时函数进行总结,包括精度为秒.毫秒.微秒三种精度的各种函数.比如Window平台下特有的Windows API函数GetTickCount().timeG ...
- ASP.NET MVC 在控制器中接收视图表单POST过来的数据方法
方法一:通过Request.Form [HttpPost] public ActionResult Test() { string id=Reques ...
- Parameter Config
public class ConfigInfo { public static ScriptsHelper Scripts { get { return new ScriptsHelper(); } ...