css中使用id和class 的不同
在 CSS 中,类选择器以一个点号显示:
.center
{text-align: center}
在上面的样例中,全部拥有 center 类的 HTML 元素均为居中。
在以下的 HTML 代码中,h1 和 p 元素都有 center 类。
这意味着两者都将遵守 ".center" 选择器中的规则。
<h1class="center"
>
This heading will be center-aligned
</h1> <pclass="center"
>
This paragraph will also be center-aligned.
</p>
CSS ID 选择器
在某些方面。ID 选择器类似于类选择器,只是也有一些重要区别。
语法
首先。ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看以下的规则:
*#intro {font-weight:bold;}
与类选择器一样,ID 选择器中能够忽略通配选择器。前面的样例也能够写作:
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
第二个差别是 ID 选择器不引用 class 属性的值。毫无疑问,它要引用 id 属性中的值。
下面是一个实际 ID 选择器的样例:
<p id="intro">This is a paragraph of introduction.</p>
类选择器还是 ID 选择器?
在类选择器这一章中我们曾解说过,能够为随意多个元素指定类。 前一章中类名 important 被应用到 p 和 h1 元素,并且它还能够应用到很多其它元素。差别 1:仅仅能在文档中使用一次
与类不同,在一个 HTML 文档中。ID 选择器会使用一次,并且仅一次。差别 2:不能使用 ID 词列表
不同于类选择器。ID 选择器不能结合使用,由于 ID 属性不同意有以空格分隔的词列表。差别 3:ID 能包括很多其它含义
类似于类,能够独立于元素来选择 ID。 有些情况下,您知道文档中会出现某个特定 ID 值,可是并不知道它会出如今哪个元素上。所以您想声明独立的 ID 选择器。比如。您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。 您仅仅知道每一个文档都会有这么一个最重要的内容,它可能在不论什么元素中。并且仅仅能出现一个。在这样的情况下,能够编写例如以下规则:#mostImportant {color:red; background:yellow;}这个规则会与下面各个元素匹配(这些元素不能在同一个文档中同一时候出现,由于它们都有同样的 ID 值):
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>
css中使用id和class 的不同的更多相关文章
- css中的id和css的区别
在样式表定义一个样式的时候,可以定义id也可以定义class. 1.在CSS文件里书写时,ID加前缀"#":CLASS用"." 2.id一个页面只可以使用一次: ...
- CSS中的剪裁和遮罩
剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...
- CSS中的class与id区别及用法
转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...
- HTML5中id可以用数字开头,但在css中不能正常使用
昨晚在看<响应式Web设计:html5和css3实战>时,书中提到“HTML5中的ID指可以用数字开头”.这个还真不知道,于是测试了一下,发现了问题. 在H5描述中是这样说的: 在css样 ...
- CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
- 在jquery中怎么使用css类名和id来获取元素?
在jquery中,你可以很容易的使用CSS类名和id类获取元素. 例如: 1.ID:#id $('#idA')——选择id为idA的所有元素,不管元素的标签名如何. $('div#idA')——选择i ...
- 平常我们是如何区分css中class和id之间有什么区别的?
我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
随机推荐
- (转载)使用Maven构建多模块项目
原文:https://www.cnblogs.com/xdp-gacl/p/4242221.html#undefined 在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最 ...
- 洛谷 P2652 同花顺
P2652 同花顺 题目背景 所谓同花顺,就是指一些扑克牌,它们花色相同,并且数字连续. 题目描述 现在我手里有n张扑克牌,但它们可能并不能凑成同花顺.我现在想知道,最少更换其中的多少张牌,我能让这 ...
- Ruby print
Ruby print
- Android Material Design-Getting Started(入门)-(一)
转载请注明出处:http://blog.csdn.net/bbld_/article/details/40400343 翻译自:http://developer.android.com/trainin ...
- [debug]重定义默认參数
编敲代码过程中遇到重定义默认參数的错误,例如以下例所看到的: #include<iostream> #include<stdlib.h> using namespace std ...
- leetCode 72.Edit Distance (编辑距离) 解题思路和方法
Edit Distance Given two words word1 and word2, find the minimum number of steps required to convert ...
- Composer使用实践
Composer 是 PHP5.3以上 的一个依赖管理工具.它允许你声明项目所依赖的代码库,它会在你的项目中为你安装他们. 地址在这里 库地址 这里相当于php应用商店,存放着很多库. 这些库,基本上 ...
- PJNATH介绍 -- 开源的用于NAT穿透的ICE, STUN和TURN
原文地址:http://blog.pjsip.org/2007/04/06/introducing-pjnath-open-source-ice-stun-and-turn/ ICE是什么? 对于那些 ...
- R和中心度、中心势
最近用R画论文里的弦图,恰好借的书里着重写了中心度等问题. 网上流行一套密歇根大学社交计算的教程.但是前两年看了好几遍总是搞不清,即便是记公式也是收效不大.不妨按照书上总结一下. 绝对法: 无向图点度 ...
- Codeforces 987B. High School: Become Human
解题思路: 1.题意:判断x^y和y^x谁大谁小. 2.由于x^y和y^x太大了,时间复杂度也不允许,所以做同等变换,比较e^(ylnx)和e^(xlny). 3.即为比较ylnx和xlny的大小. ...