欢迎来到酷客淘商城,为站长提供交易担保服务 访问移动版
站长交易首选担保平台!
酷客淘

元素的id和class

日期: 2019-12-09 11:13:54 人气: -

id和class是HTML元素中两个最基本的公共属性。


一、元素的id属性

id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值,CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。


举例:


1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link href="css/css_reset.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="first">酷客淘</div>

    <p id="first">酷客淘</p>

</body>

</html>

说明:


上面HTML代码是错误的,因为在同一个HTML页面中,不允许出现两个相同的id。不过要注意一下,在不同页面是可以出现相同id的元素。


二、元素的class属性

class,顾名思义,就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同的class具有相同的CSS样式。


如果你要为两个元素或者两个以上元素定义相同的样式,建议使用class属性。


举例:


1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link href="css/css_reset.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div class="first">酷客淘</div>

    <p class="first">酷客淘</p>

</body>

</html>

说明:


这段HTML代码是正确的,因为在同一个HTML页面中,允许相同的元素或者不同的元素设置相同的class属性,以便我们可以统一对具有相同的class属性的元素定义相同的CSS样式。


id和class就像你的身份证号和姓名,身份证号是全国唯一的,id号也就是唯一的,class(类名)就是姓名,两个人的姓名就有可能一样。


此外,需要注意一下:


(1)一个标签可以同时定义多个class;

(2)id也可以写成name,区别在于name是HTML中的标准,而id是XHTML中的标准,现在网页的标准都是使用id,所以大家尽量不要用name属性;