同一个页面用多个id有什么影响

我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：

ID方法：#test{color:#333333}，在页面中调用内容

CLASS方法：.test{color:#333333}，在页面中调用内容

id一个页面只可以使用一次，class可以多次引用。

有网友问，id和class好象没什么区别，我在页面中用了多个id在IE中显示也正常，用多个id有什么影响吗？

回答：第一影响就是不能通过W3的校验。

在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。

id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

web标准希望大家用严格的习惯来写代码，

例如：你可以用显示粗体，也可以用来显示，但W3C 建议大家用，因为更有语义

如果对这些细节问题不重视，觉得无所谓，
那么你就没必要向xml过渡了，也没必要学习web标准了，因为web标准应用就是从这些小细节上的改变开始，否则用现在的html不是也可以？

赞 (0)

相关推荐

  • 同一个页面用多个id有什么影响

    我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如: ID方法:#test{color:#333333},在页面中调用内容 CLASS方法:.test{color:#333333},在页面中调用内容 id一个页面只可以使用一次,class可以多次引用. 有网友问,id和class好象没什么区别,我在页面中用了多个id在IE中显示也正常,用多个id有什么影响吗? 回答:第一影响就是不能通过W3的校验. 在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID"一般情况

  • js实现同一个页面多个渐变效果的方法

    本文实例讲述了js实现同一个页面多个渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现5个元素中随便一个,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小的效果. 要点一: var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; } 根据目标值和当时值的对比,来决定是正向还是负向速度. 要点二: for(i=0; i<runs_li.length; i++){ runs_li[i].timer = n

  • js实现同一个页面,多个enter事件绑定的示例

    困得不行了 ,脑袋转不动了,大家直接拿代码用吧... document.onkeydown = function(e) { var ev = (typeof event!= 'undefined') ? window.event : e; if(ev.keyCode == 13 && document.activeElement.id == "") {//activeElement活动事件,该事件只可以使用于输入域中 console.log("内容111:&q

  • vue在同一个页面重复引用相同组件如何区分二者

    vue在同一个页面重复引用相同组件如何区分二者

    目录 同一个页面重复引用相同组件如何区分二者 1.使用情境 2.解决方法 在同一个页面重复引用相同组件时的干扰处理 同一个页面重复引用相同组件如何区分二者 1.使用情境 我在同一个vue中引用了同样的一个图层选择的组件,需要区分二者的选择的radio值,如果不做区分,这二者选择的radio值看上去将会一样 2.解决方法 先说原理,这个重复引用的组件虽然一样,但是二者在被创建的时候各自走了一遍生命周期,所以变量之间不冲突. 首先在引用组件中新增一个props,这里命名为spareId,用来区分二者

  • vue实现同一个页面可以有多个router-view的方法

    使用Vue+Element搭建项目的时候,为了避免一个页面过大,将tab里面的内容分成多个页面,并使用同级视图展示 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户详情" name="first"> <router-view></router-view> </el-t

  • JavaScript实现同一个页面打开多张图片

    JavaScript实现同一个页面打开多张图片

    我们的目标是: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js美术馆</title> <script type="text/javascript" > function showPic(whichpic) { var sourc

  • js检查页面上有无重复id的实现代码

    方法一: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>  <TITLE> New Document </TITLE>  <script type="text/javascript">    window.onload = function(){        var ta

  • 解决vue一个页面中复用同一个echarts组件的问题

    因为页面中要用echarts图表的地方比较多,所以封装了组件,方便复用,如图: 我需要这样一个饼图,并且接下来在很多次地方要用到. 直接复制官网的代码,再改改数据,需要用的时候直接拿来用. 但是接下来出现了一个问题:如果我在同一个页面多次使用这个组件,图表将不能正常显示.分析了一下, echarts通过id获取对象 // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); 当封装为

  • AngularJS路由实现页面跳转实例

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo

  • js点击页面其它地方将某个显示的DIV隐藏

    实现也很简单,但需要注意的是,在点击显示的事件中,需要做阻止事件冒泡的处理,否则就触发页面的点击事件了.但这样做也有一个缺点,即如果同一个页面中如果也有事件阻止冒泡,则不能隐藏DIV,所以在这样的事件中需要特殊处理下:自己调用隐藏下DIV(但正常来说这样的事件并不多): JS: 复制代码 代码如下: $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(function(e) {

随机推荐