类选择器与ID选择器的比较
如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化。不过推荐使用类选择器,一会儿我会解释理由。
要在class选择器和id选择器之间作出选择的时候,建议尽可能地使用class选择器。这主要是因为我们可以复用class选择器。有人提议完全不使用id选择器,我赞同这种观点,并且在自己的工作中始终遵循这一点,但最终的决定权掌握在网站开发人员手中。
id选择器会引入下面两个问题。
一,与它们关联的样式不能在其他元素上复用(记住,在一个页面中,一个id只能出现在一个元素上)。这会导致在其他元素上重复样式,而不是通过class共享样式。
二,它们的特殊性比class选择器要强得多。这意味着如果要覆盖使用id选择器定义的样式,就要编写特殊性更强的CSS规则。如果数量不多,可能还不难管理。如果处理规模较大的网站,其CSS就会变得比实际所需的更长、更复杂。
随着你处理的CSS越来越多,你对这两点的理解也会更加清晰。(另一方面,有人喜欢使用id选择器的原因之一就是使用它们一眼就能看出元素是唯一的。不过,依照个人经验,这点好处还不足一均衡它带来的弊端。另外,万一你哪天改变了网站设计,原先唯一的元素不再唯一,id选择器就不合适了。)
因此,推荐的做法是寻找能将共享样式结合进一个或多个class的机会,从而可以对它们进行复用,同时,如果确实要使用id选择器,也应该尽量少用。这样,你的样式表会比较短,更易于管理。需要说明的是,id选择器在HTML中仍具有重要的作用。通过它们可以在页面中定义锚,在编写JavaScript为特定的页面元素应用特殊行为时它们尤其具有重要的价值。
摘自《HTML5 and CSS visual QuickStrat Guide》
类选择器与ID选择器的比较的更多相关文章
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
- CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)
通配符选择器 * 与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B 对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?
id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...
- jquery基本选择器:id选择器、class选择器、标签选择器、通配符选择器
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...
- html class选择器与id选择器
class选择器: <p class="p1"> .p1{ color:red; ..... } id选择器: <p id="p2"> ...
- 选择器(ID选择器)
ID选择器: 为HTML标签添加ID属性: <p id="p1">内容1</p> <p id="p2">内容2</p& ...
随机推荐
- 微信小程序 调用远程接口,给全局数组赋值
关键是 let that = this 因为在onLoad 的 wx.request方法里, this指的是 wx.request 的上下文, 所以应该是在 onLoad 的时候定义 let that ...
- SoapUI: 设置case的属性变量
琐碎的东西也想一点一滴的记下来
- iOS逆向(五)-ipa包重签名
为什么要重签名? 1.在没有源代码的情况下,你已经对某个应用进行了资源修改(比如修改了启动图或图标等).修改完成以后,如果想要让APP可以正常使用,该APP一定要重新签名然后压缩成IPA文件. 2.如 ...
- IIS服务器怎么查看网站日志
在做网站的优化以及网站安全的时候,分析网站的日志是非常重要的,但是公司的服务器是IIS的,以前弄的是linux的服务器,不知道该怎么弄,最终找到了解决办法. 1.iis默认是有日志的,在iislog下 ...
- Android闪屏问题的分析思路
http://www.devba.com/index.php/archives/6157.html Android闪屏问题的分析思路 作者:孤风一剑 发布:2015-01-22 12:35 ...
- Linux下查看根目录各文件内存占用情况
一.服务器运行一点时间后各种的项目文件,日志文件,数据库备份登,会越来越多,在linux下可以使用 du 和 df 命令查看. 1.df -h 命令查看整体磁盘使用情况 2. 使用 du -ah -- ...
- Python模块学习filecmp文件比较
Python模块学习filecmp文件比较 filecmp模块用于比较文件及文件夹的内容,它是一个轻量级的工具,使用非常简单.python标准库还提供了difflib模块用于比较文件的内容.关于dif ...
- java修改文件所有者及其权限
1.设置所有者 管理文件所有者 Files.getOwner()和Files.setOwner()方法 要使用UserPrincipal来管理文件的所有者 (1)更改文件的所有者 import jav ...
- 写代码如何合理使用和优化我们的机器资源(CPU、内存、网络、磁盘)
写代码脑子一定要绷紧一根弦,认知到我们所在的机器资源是有限的.机器资源有哪些?CPU.内存.网络.磁盘等,如果不做好保护控制工作,一旦某一资源满负荷,很容易导致出现线上问题. 1 CPU 资源怎么限制 ...
- 执行sudo supervisorctl reload报错ImportError: No module named supervisor.supervisord
由于yum install supervisor 会默认使用python2.6环境,首先要安装好python2.6的环境,然后修改以下文件首行为2.6即可 [root@VM_0_15_centos ~ ...