• 密码登录
  • 手机登录
社交账号登录
阅读( ) 收藏( ) 加载中~ 我要纠错

代码实例

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {  background-color: lightblue;  color: black;  padding: 40px;  text-align: center;}
/* 设置类名为 "city" 的所有元素的样式 */
.city {  background-color: tomato;  color: white;  padding: 10px;}
</style>
</head>
<body>
<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>
<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<h2 class="city">Paris</h2>
</body>
</html>

尝试一下 »

点击“尝试一下”按钮查看在线实例

使用 id 属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是:写一个井号 (#),后跟一个 id 名称。然后,在花括号 {} 中定义 CSS 属性。

下面的例子中我们有一个 <h1> 元素,它指向 id 名称 "myHeader"。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置

注释:id 名称对大小写敏感!

注释:id 必须包含至少一个字符,且不能包含空白字符(空格、制表符等)。

Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用,而一个 id 名称只能由页面中的一个 HTML 元素使用


×