html – ID和类之间的区别

发布时间：2020-12-14 23:47:23 所属栏目：资源来源：网络整理

导读：我经历了 CSS :Class and ID.当我尝试他们给出的例子时,我不会觉得它们之间存在任何差异. !DOCTYPE htmlhtmlheadstyle#para1{text-align:center;color:red;} /style/headbodyh1 id ="para1"Hai/h1p id="para1"Hello World!/ppThis paragraph is not affected

我经历了 CSS :Class and ID.当我尝试他们给出的例子时,我不会觉得它们之间存在任何差异.

<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
} 
</style>
</head>

<body>
<h1 id ="para1">Hai</h1>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

给我输出我想要的地方说id选择器用于指定单个唯一元素的样式.

我是以错误的角度看待这个吗？

解决方法

首先,w3schools is a terrible resource.它写得很糟,杂乱,没有重点,而且经常误导.你应该使用 this much better set of resources at the Mozilla Developer Network instead(它开始实现同样的目的).

您的示例根本不使用类.您有CSS调用ID,以及2个带有该ID的HTML元素(您不应该这样做 – ID应该是唯一的！). 2的关键区别：

> ID引用唯一元素.任何1个ID应该只有1个实例.类可以应用于许多元素,元素可以有多个类
>使用ID的CSS规则将覆盖带有类的CSS规则,如果它们都尝试分配相同的属性.
> ID用于各种本机应用程序：锚引用,表单,iframe,而类纯粹用于CSS样式.

I modified your code as an example of these points.以下是一些使用类进行参考的代码：

.paragraph {
    font-style: italic;
    color: green;
}

和HTML：

<p id="para1" class="paragraph">Blah blah blah</p>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!