HTML ID选择器的详细说明及案例

  1. 定义
    ID选择器用于选择具有特定id属性的HTML元素。ID在HTML文档中必须是唯一的，不能重复。
    ID选择器以 # 开头，后跟ID名称。

  2. 语法

    #id_name {
    property: value;
}

  3. HTML中使用
    在HTML元素的id属性中指定ID名称。

  4. 案例

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ID选择器案例</title>
    <style>
        #header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }

        #content {
            margin: 20px;
            font-size: 18px;
        }

        #footer {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="header">网页标题</div>
    <div id="content">这是网页的主要内容部分。</div>
    <div id="footer">页脚信息</div>
</body>
</html>

  5. 解释

    • #header 选择器应用于具有 id="header" 的<div>元素，设置背景颜色、文字颜色、内边距和文本居中。

    • #content 选择器应用于具有 id="content" 的<div>元素，设置外边距和字体大小。

    • #footer 选择器应用于具有 id="footer" 的<div>元素，设置背景颜色、文字颜色、内边距和文本居中。

  6. 注意事项

    • ID必须唯一，不能在同一页面中重复使用。

    • ID选择器的优先级高于类选择器和标签选择器。

    • 在JavaScript中，可以通过document.getElementById()方法直接获取ID元素。

本篇文章内容来源于：id选择器详细说明以及案例