• 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. centos7.4安装gitlab

    1. 安装依赖软件 yum -y install policycoreutils openssh-server openssh-clients postfix 2.下载gitlab安装包,然后安装 c ...

  2. Pytorch-Faster-RCNN 中的 MAP 实现 (解析imdb.py 和 pascal_voc.py)

    ---恢复内容开始--- MAP是衡量object dectection算法的重要criteria,然而一直没有仔细阅读相关代码,今天就好好看一下: 1. 测试test过程是由FRCN/tools/t ...

  3. 2.1 MySQL基础使用

    本文是课上资料的总结非原创没有转载地址 目录 引言 为什么需要数据库? 数据库和应用程序的关系 MySQL基础使用 一.数据库简介 1.1 简介 1.2 常见数据库管理系统 1.3 MySQL卸载 1 ...

  4. kafka 日志策略

    日志查看: usr/local/kafka/kafka_2.11-2.4.0/bin/kafka-run-class.sh kafka.tools.DumpLogSegments --files /t ...

  5. a链接 打电话 发短信 发email

    <a href="tel:10086">给10086打电话</a><a href="sms:10086">给10086发短信 ...

  6. text-align:center;在ie7下,父级加上会让block状态的子元素居中。

    text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.

  7. The way get information from mssql by using excel vba and special port

    Yes,  we can get information from mssql by using excel vba.  But the default port of MSSQL is  1433. ...

  8. 解决 U2000 R017 安装报错: 检查SQL server数据库环境变量信息 ( 异常 ) [ 详细信息 ] PATH环境变量中缺少数据库路径的信息

    U2000 R017 安装报错: 检查SQL server数据库环境变量信息 ( 异常 ) [ 详细信息 ] PATH环境变量中缺少数据库路径的信息 管理员模式打开注册表位置: HKEY_LOCAL_ ...

  9. [Linux] day06——文档管理

    文档管理===================mkdir 创建目录 -p /路径/目录名  (父路径不存在 -p) ---------------------------------------  t ...

  10. jgrid异步数据加载

    参考:https://blog.csdn.net/hurryjiang/article/details/7077725