• id 选择器

ID 只能被指定单个元素使用，无法多个元素使用。像你的身份证号，是唯一的，
id 选择器以 “#” 来定义。
id选择器的优先级高于class选择器的优先级的

# userid {

       text-align:center;

       color:red;

}

注： ID属性不要以数字开头

  • class 选择器

class可以在多个元素中使用，多个元素拥有同个样式；像名字，好多人可以叫同个名字
class 选择器 以一个点"."号显示：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.name {

        text-align:center;

        color:red;

}

</style>

</head>

<body>

<h1 class="name">我叫马冬梅</h1>

<p class="name">这么巧，我也叫马冬梅</p>

</body>

</html>

这里h1 和p标签都使用了class=“name”，那么这2个元素字体都居中和颜色为红色
注：类名的第一个字符不能使用数字

  • 什么时候使用id？什么时候使用class？

一般网站分为头部，主体部分，脚部。因为考虑到这些地方在同一个页面只会出现一次，所以用id 。

当页面中用到js或者要动态调用对象的时候，要用到id。除了上述情况下，都是使用class来命名的

id 和 class的区别的更多相关文章

  1. html元素中id和name的区别

    可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Nam ...

  2. html中元素的id和name的区别（2016-1-22）

    HTML中元素的Id和Name属性区别 一直以来一直以为在html中,name和id没什么区别,今天遇到一个坑才发现(PHP获取不到表单数据,原因:元素没有name,只定义了id),这两者差别还是很大 ...

  3. form表单中的id 与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  4. javascript querySelector和getElementById通过id获取元素的区别

    querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta cha ...

  5. id和class的区别

    id和class是定义css样式用到的,不同的是定义样式时的写法不一样,使用id选择样式时,定义的格式为 #main{width:20px;} ,使用class时用到的是 .main{width:20 ...

  6. form表单中id与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  7. ID和Name的区别

    HTML元素的ID和Name属性的区别一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑.今天BAIDU了一下,才发现里面大有文章.发出来研究研究:最classical的答案:ID就像是一个 ...

  8. Spring中applicationContext.xml的bean里的id和name属性区别

    转自:http://www.cnblogs.com/ztf2008/archive/2009/02/11/1388003.html <beans><bean id="per ...

  9. meta name id class 标签的区别

    meta https://zhidao.baidu.com/question/2052283721385566387.html name 跟 id 的区别 http://blog.csdn.net/f ...

  10. css常用属性总结之 id和class的区别，使用类还是ID?

    前面两篇文章我们分别谈到了class和id的相关知识和如何使用,但是在实际项目中,我们该如何抉择,class还是id? 先回顾下两者的区别吧! 1.id具有唯一性,class具有普遍性,所以一个页面同 ...

随机推荐

  1. Docker将自己的镜像发布到个人私有仓库

    Docker将自己的镜像发布到个人私有仓库 1.注册dockerhub账户 docker提供了一个类似于github的仓库dockerhub, 网址https://hub.docker.com/需要注 ...

  2. 前端学习 之 CSS（二）

    五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...

  3. static关键字的作用是什么？

    static的作用:常用来修饰变量. 全局变量被static修饰后,就称之为静态全局变量:局部变量被static修饰后,就称之为静态局部变量.统称为静态变量. 如果需要进一步解释下面的现象,可以了解i ...

  4. 【转】十步让你成为一名优秀的Web开发人员

    第一步:学好HTML HTML(超文本标记语言)是网页的核心,因此你首先应该学好它,不要害怕,HTML很容易学习的,但也很容易误用,学懂容易要学精还得费点功夫,但学好HTML是成为Web开发人员的基本 ...

  5. elk单机安装部署

    es 下载地址:wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.1.0-linux-x86_64.t ...

  6. 吴裕雄--天生自然PythonDjangoWeb企业开发：需求

    开发或者做一个项目,是要有一个需求过来的,而不是无缘无故的,启动一个项目,或者推动整个项目进行下一步迭代.这个需求可能是根据用户反馈增加的,可能是老板提出来的,也有可能是产品经理提出来的,但是无论是什 ...

  7. Manacher(马拉车)算法

    Manacher算法是一个求字符串的最长回文子串一种非常高效的方法,其时间复杂度为O(n).下面分析以下其实行原理及代码: 1.首先对字符串进行预处理 因为回文分为奇回文和偶回文,分类处理比较麻烦,所 ...

  8. [aac @ ...] Specified sample format s16 is invalid or not supported

    在使用FFmpeg打开编码器的时候出现以下错误: [aac @ 000001da19fd7200] Specified sample format s16 is invalid or not supp ...

  9. LauUI 的学习

    LayUI学习笔记 layer laydate layui 学习新技术方法:学习一个新技术,要去把它的文档通读一遍,不管你能不能读明白,就算你不明白也大概能知道它是怎么回事了,一回生二回熟,多读几遍, ...

  10. 「SPOJ1487」Query on a tree III

    「SPOJ1487」Query on a tree III 传送门 把树的 \(\text{dfs}\) 序抠出来,子树的节点的编号位于一段连续区间,然后直接上建主席树区间第 \(k\) 大即可. 参 ...