CSS类选择器和ID选择器
ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。
ID也可以用来标识持久的结构性元素,例如主导航或内容区域。
ID还可以用来标识一次性元素,例如某个链接或表单元素。
一个ID只能应用于页面上的一个元素。
同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。例如有一个新闻页面,其中包含多篇新闻,代码如下所示
<div id="story-id-1">
<h2>ID</h2>
<p>ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。 ID也可以用来标识持久的结构性元素,例如主导航或内容区域。 ID还可以用来标识一次性元素,例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。
</p>
</div>
<div id="story-id-2">
<h2>类</h2>
<p>同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
</p>
</div>
不必给每篇新闻分配不同的ID,可以给所有新闻分配一个类名news.
<div class="news">
<h2>ID</h2>
<p>ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。 ID也可以用来标识持久的结构性元素,例如主导航或内容区域。 ID还可以用来标识一次性元素,例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。
</p>
</div>
<div class="news">
<h2>类</h2>
<p>同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
</p>
</div>
在分配ID和类名时,一定要尽可能保持名称与表现方式无关。例如,如果希望所有表单通知消息显示为红色,可以给他们分配类名red。只要页面上没有其他红色的元素,这就没问题。但是,如果还希望让4个必需的表单标签也显示为红色,就必须猜测这个类引用的是哪种元素,这时情况就有些混乱了。想象一下,如果在整个网站上到处使用表现性元素,代码会多么混乱。如果决定把表单通知由红色改为黄色,就更复杂了。在这种情况下,必须修改所有类名,否则名为red的元素就会显示为黄色。
因此,应该根据“它们是什么”来为元素命名,而不应该根据“它们的外观如何”来命名,这种方式会让代码更有意义,并且避免代码与设计不同步。对于前面的示例,不要给通知分配类名red,而是应该分配更有意义的名称,比如,.warning或.notification。有意义的类名的最大优点是可以在整个网站中重用它们。例如,还可以在其他类型的消息上使用.notification类,可以根据它们在文档中的位置应用完全不同的样式。
差的名称 | 好的名称 |
red |
error |
leftColumn | secondaryContent |
topNav | mainNav |
firstPara | intro |
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写,为了容易辨认,最好统一采用完全小写的类名和ID,多个单词之间用连字符分隔,例如,andy-budd比andyBudd清楚的多。
ID还是类?
相信你曾和我一样,常常很难决定一个元素应该使用ID还是类名。一般原则是,类应该应用于概念上相似的元素,这些元素可以出现在页面上的多个位置,而ID应该应用于不同的唯一的元素。
只有在目标元素非常独特,绝不会在网站上其他地方别的东西使用这个名称时,建议使用ID。换句话说,只有在绝对确定这个元素只会出现一次的情况下,才应该使用ID,如果你认为以后可能需要相似的元素,就是用类。
最后总结区别如下:
第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class
第二:当页面中用到js或者要动态调用对象的时候,要用到id(当然class也会用到,但是id更常用)。
第三:id选择器不能结合使用,class可单独使用,也可与其他元素结合使用。
第四:class有多类选择器,id选择器则无,如
<p class="important warning">
This paragraph is a very important warning.
</p>
CSS类选择器和ID选择器的更多相关文章
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)
通配符选择器 * 与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B 对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...
- CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
- 类选择器与ID选择器的比较
如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化.不过推荐使用类选择器,一会儿我会解释理由. 要在class选择器和id选择器之间作出选择的时候,建 ...
- CSS的Class以及ID选择器
9.CSS的Class以及ID选择器 id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用. 同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素, ...
- 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 类选择器.属性 ...
- 选择器(ID选择器)
ID选择器: 为HTML标签添加ID属性: <p id="p1">内容1</p> <p id="p2">内容2</p& ...
- jquery基本选择器:id选择器、class选择器、标签选择器、通配符选择器
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...
随机推荐
- 打开 Mac OS X 隐藏的用户资源库文件夹的方法
在较高版本的 Mac OS X 中,用户的资源库文件夹(/Users/username/Library)默认被系统隐藏了,从 Finder 窗口中不能直接打开. 但是通过下面这个方法可以快速打开用户资 ...
- 使用Html5+C#+微信 开发移动端游戏详细教程:(六)游戏界面布局与性能优化
本篇教程我们主要讲解在游戏界面上的布局一般遵循哪些原则和一些性能优化的通用方法. 接着教程(五),我们通过Loading类一次性加载了全部图像素材,现在要把我们所用到的素材变成图片对象显示在界面上,由 ...
- 配置visual studio code进行asp.net core rc2的开发
1.安装.net core sdk https://github.com/dotnet/cli#installers-and-binaries,根据你的系统选择下载. 2.下载vscode的C#扩展插 ...
- IP Failover Setup using Keepalived on CentOS/Redhat 6
source url:http://tecadmin.net/ip-failover-setup-using-keepalived-on-centos-redhat-6/ Keepalived is ...
- url rewrite优化url的可读性
1.下载urlrewrite,官方下载地址:http://tuckey.org/urlrewrite/ 2.解压缩文件,将jar放入项目,并创建urlrewrite.xml: 3.将filter添加到 ...
- Python单元测试框架之pytest---如何执行测试用例
介绍 pytest是一个成熟的全功能的Python测试工具,可以帮助你写出更好的程序. 适合从简单的单元到复杂的功能测试 l 模块化parametrizeable装置(在2.3,持续改进) l 参 ...
- yousa_team团队项目 兼职平台 完成展示
我们团队的团队项目是一个大学生兼职网站,商家可以在网站上发布信息,学生对相应的岗位进行预约,然后根据信誉度来表示用户的信誉,整个平台由管理员监控, 包括修改错误信息,修改用户信誉度,删除过期信息,接受 ...
- So Easy!让开发人员更轻松的工具和资源
这篇文章给大家分享让开发人员生活更轻松的免费工具和资源.所以,如果你正在寻找一些为迅速解决每天碰到的设计和开发问题的工具和资源,不要再观望,试试这些工具吧.这些奇妙的工具不仅会加快您的生产,也让你的工 ...
- 潮流设计:15个创意的 3D 字体版式作品欣赏
3D字体设计是真的很棒,它最适用于广告.使用3D文字和不同的惊人效果,例如灯光或纹理带来了很多东西.在版式设计中,最重要的是消息.如果它抓住了用户的注意力,设计工作是在正确的轨道上. 您可能感兴趣的相 ...
- TypeWonder – 在任何网站上实时预览字体效果
TypeWonder 让网页字体的选择过程变得轻松愉快.它可以帮助您在任何网站上快速测试 Web 字体效果!输入网站网址,就能够即时预览的字体的实际效果,还可以从数百种字体中进行挑选,您还可以得到所需 ...