在 CSS 中,类选择器以一个点号显示:

.center {text-align: center}

在上面的样例中,全部拥有 center 类的 HTML 元素均为居中。

在以下的 HTML 代码中,h1 和 p 元素都有 center 类。

这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1> <p class="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 的不同的更多相关文章

  1. css中的id和css的区别

    在样式表定义一个样式的时候,可以定义id也可以定义class. 1.在CSS文件里书写时,ID加前缀"#":CLASS用"." 2.id一个页面只可以使用一次: ...

  2. CSS中的剪裁和遮罩

    剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...

  3. CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...

  4. HTML5中id可以用数字开头,但在css中不能正常使用

    昨晚在看<响应式Web设计:html5和css3实战>时,书中提到“HTML5中的ID指可以用数字开头”.这个还真不知道,于是测试了一下,发现了问题. 在H5描述中是这样说的: 在css样 ...

  5. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  6. 在jquery中怎么使用css类名和id来获取元素?

    在jquery中,你可以很容易的使用CSS类名和id类获取元素. 例如: 1.ID:#id $('#idA')——选择id为idA的所有元素,不管元素的标签名如何. $('div#idA')——选择i ...

  7. 平常我们是如何区分css中class和id之间有什么区别的?

    我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用 ...

  8. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  9. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

随机推荐

  1. HTML 编码规范

    语法 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格或 tab 字符 在属性上,使用双引号 "",不要使用单引号 '' 属性名 / 属性值全小写,用中划线 - 做分隔符 ...

  2. Java基础学习总结(48)——Java 文档注释

    Java只是三种注释方式.前两种分别是// 和/* */,第三种被称作说明注释,它以/** 开始,以 */结束. 说明注释允许你在程序中嵌入关于程序的信息.你可以使用javadoc工具软件来生成信息, ...

  3. 洛谷—— P3388 【模板】割点(割顶)

    https://www.luogu.org/problem/show?pid=3388 题目背景 割点 题目描述 给出一个n个点,m条边的无向图,求图的割点. 输入输出格式 输入格式: 第一行输入n, ...

  4. synchronized与static synchronized 的差别、synchronized在JVM底层的实现原理及Java多线程锁理解

    本Blog分为例如以下部分: 第一部分:synchronized与static synchronized 的差别 第二部分:JVM底层又是怎样实现synchronized的 第三部分:Java多线程锁 ...

  5. POJ 2369

    我们知道,当循环长度为L时,置换群幂次为K ,则结果是GCD(L,K)个积相乘. 于是,我们只需要求出每个循环的长度,求得它们的最小公倍数即为解. #include <iostream> ...

  6. POJ 2480

    可以容易得知,F=sum(p*phi(n/p)).思路就断在这里了... 看过别人的,才知道如下: 由于gcd(i,n*m)=gcd(i,m)*gcd(i,n),所以gcd为积性函数.而积性函数之和为 ...

  7. 协议栈处理中的conntrack HASH查找/Bloom过滤/CACHE查找/大包与小包/分层处理风格

    1.路由CACHE的优势与劣势 分级存储体系已经存在好多年了.其精髓在于"将最快的存储器最小化.将最慢的存储器最大化",这样的结果就使资源利用率的最大化.既提高了訪问效率,又节省了 ...

  8. 浅析Java抽象类和接口的比較

    abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是因为这两种机制的存在,才赋予了Java强大的面向对象能力. abstract class和inte ...

  9. Hadoop自学笔记(一)常见Hadoop相关项目一览

    本自学笔记来自于Yutube上的视频Hadoop系列.网址: https://www.youtube.com/watch?v=-TaAVaAwZTs(当中一个) 以后不再赘述 自学笔记,难免有各类错误 ...

  10. HDU 1040.As Easy As A+B【排序】【如题(水!水!水!)】【8月24】

    As Easy As A+B Problem Description These days, I am thinking about a question, how can I get a probl ...