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 ...
随机推荐
- 七牛portal可用性测试记
引言:2013年年底应七牛公司朋友的邀请,给他们的Portal进行可用性测试.七牛(http://www.qiniu.com/)一直专注于云存储基础服务,在业内颇有声誉.七牛云存储的后台选用并不常用的 ...
- 用 .NET Reflector 8 查看 System.Windows.Controls 命名空间下的类
为了学习自定义控件,就想看看WPF基本元素的代码.使用到工具.NET Reflector. System.Windows.Controls 命名空间在PresentationFramework.dll ...
- 关于Assembly.CreateInstance()与Activator.CreateInstance()方法
于Assembly.CreateInstance()与Activator.CreateInstance()方法 动 态创建类对象,大多是Activator.CreateInstance()和Activ ...
- redis实现有序的消息队列
redis是什么东西就不多说了,网上文章一搜一大堆. 首先来说一下我要实现的功能: 类似一个消息中转站吧,如果有人要发送消息,先将消息发到我这里来,然后我这边进行转发,为的就是有一个统一的管理和修改时 ...
- 通过python切换hosts文件
做开发或测试时常需要切换hosts ,如果hosts比较多,那么频繁的打开hosts文件对地址加注释(#),再把去掉注释是个繁琐的事情. 当然,SwitchHosts 已经可以帮我们方便的解决了这个繁 ...
- 读Java Concurrency in Practice. 第六章.
这一章开讲任务执行.绝大多数并发程序的工作都可以分解为抽象的.互不相关的工作单元,称之为任务(Task). 使用java线程来执行任务 以web服务器的实现举例, 此时将用户的一次连接,当做一个独立的 ...
- javascript中&&和||的区别
javascript中&&和||的区别 &&和||操作符两边不是布尔类型时,系统会转换成布尔类型值再计算(空字符串.null.0都会被转成false),结果本身不变. ...
- HT全矢量化的图形组件设计
HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: 矢量可无级缩放,界面不失真不模糊 描述矢量的文本内容远比图片小得多 目前各种window.devicePixelRatio不 ...
- 转帖一篇sixxpack破解的文章！
星期天闲着没事玩游戏,玩游戏不能无外挂.于是百度了半天,找到了一个,看介绍貌似不错,就下载了下来.一看,竟然是用.net写的,下意识地Reflector了一下.发现竟是一个叫actmp的程序集.如图: ...
- Dev gridView中设置自适应列宽和日期显示格式、金额的显示格式
在Dev GridView控件中,数据库中表数据日期都是长日期格式(yyyy-MM-dd HH:mm:ss),但显示在控件变成短日期格式(yyyy-MM-dd),金额显示要显示精确的数值, 比如80. ...