HTML之id选择器、class选择器及name属性区别

最近做网站的时候，经常搞不清id、class和name之间的区别，于是就在网上搜集资料学习，整合出下面的版本，以防自己忘记的同时帮助到有需求的人。

id选择器

唯一标识一个元素的，只能针对某一个样式进行控制即在同一个HTML页面只能调用一次，具有唯一性。id选择器是以 “ # ” 开头。
eg. CSS定义 #headerline1 {width: 100%;height: 80px;}
调用 <div id="headerline1">这是id的例子</div>

class选择器

可以针对多个即在同一个HTML页面可以多次调用相同的class类。class选择器是以 “ . ” 开头。
eg. CSS定义 .header {background-color: #04D9B3;position: relative;}
调用 <div class="headerline1">这是class的例子</div>

name属性

相对于前两个而言，name主要用于获取某表单域信息，但它的用途比较广泛,主要包括：

作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、button等。我们可以在服务器端根据其name通过Request.Params取得元素提交的值。
HTML元素 input type=“radio” 分组，radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
建立页面中的锚点，我们知道<a href="URL"></a>是获得一个页面超级链接，如果改用name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点（即从一个链接跳转到一个位置或其他网页，所要跳转到的那个位置就叫做锚点，它是一种在页面内部定位的方式）。
作为对象的identity，如applet、object、embed等元素。比如在applet对象实例中，我们将使用其name来引用该对象。
在img元素和map元素之间关联的时候，如果要定义img的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的map元素的Name)。
某些特定元素的属性，如attribute，meta和param。例如:
为object定义参数<param name = "appletParameter" value = "value">
或meta中<meta name = "Author" content = "Dave Raggett">。

HTML之id选择器、class选择器及name属性区别相关推荐

【代码笔记】Web-CSS-CSS id和Class选择器
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
如何玩转CSS的Id 和 Class选择器？
目录 id 和 class 选择器 id 选择器 class 选择器 id 和 class 选择器如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 &quo ...
CSS——id 和 class 选择器
id 选择器 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义.ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中 ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
jQuery选择器中的通配符[id*='id']及jquery选择器总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
CSS - 选择器(标签选择器、类选择器、ID选择器)
CSS - 选择器(标签选择器.类选择器.ID选择器) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu ...
Html和css的class和id的命名,[HTML] CSS Id 和 Class选择器
id 和 class 选择器如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标 ...
前端 -＞ js原生选择器,jQuery选择器基本选择器(ID选择器,元素选择器,类名选择器,复合选择器,通配符选择器)
文章目录 jQuery基本选择器 js选择器(原生选择器) jQuery基本选择器 1. ID选择器ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对 ...
HTML—— Id和Class选择器
为什么要用选择器? 要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. Id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. ...

HTML之id选择器、class选择器及name属性区别

id选择器

class选择器

name属性

HTML之id选择器、class选择器及name属性区别相关推荐

最新文章

热门文章