编辑“︁CSS ID选择器”︁（章节）

= CSS ID选择器 =

== 介绍 ==
'''CSS ID选择器'''是一种用于选取HTML文档中具有特定ID属性的元素的CSS选择器。ID选择器以井号（#）开头，后跟ID名称。在HTML中，ID属性是唯一的，这意味着一个页面中只能有一个元素拥有特定的ID值。因此，ID选择器通常用于选择页面中的唯一元素。

ID选择器的语法如下：
<syntaxhighlight lang="css">
#id-name {
    property: value;
}
</syntaxhighlight>

== 基本用法 ==
ID选择器用于为页面中的特定元素应用样式。以下是一个简单的示例：

=== HTML代码 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>ID选择器示例</title>
    <style>
        #header {
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>欢迎来到我的网站</h1>
    </div>
</body>
</html>
</syntaxhighlight>

=== 输出效果 ===
在这个例子中，ID选择器`#header`会选中`<div id="header">`元素，并为其应用背景颜色、内边距和文本居中的样式。

== ID选择器的特性 ==
1. '''唯一性'''：ID在HTML文档中必须是唯一的。一个页面中不能有多个元素共享同一个ID。
2. '''高优先级'''：ID选择器的优先级高于类选择器和标签选择器（优先级顺序：ID > 类 > 标签）。
3. '''JavaScript交互'''：ID常用于JavaScript中通过`document.getElementById()`方法获取元素。

== 优先级比较 ==
CSS选择器的优先级可以通过以下规则比较：
* ID选择器（#id）的优先级为100。
* 类选择器（.class）的优先级为10。
* 标签选择器（div, p等）的优先级为1。

示例：
<syntaxhighlight lang="css">
/* 优先级：100 */
#example {
    color: red;
}

/* 优先级：10 */
.example {
    color: blue;
}

/* 优先级：1 */
p {
    color: green;
}
</syntaxhighlight>

如果这些规则同时应用于同一个元素，ID选择器的样式会优先应用。

== 实际应用场景 ==
ID选择器常用于以下场景：
1. '''页面布局'''：为页面的主要部分（如头部、导航栏、页脚）设置样式。
2. '''表单元素'''：为特定的表单输入字段添加样式。
3. '''JavaScript交互'''：通过ID选择器选中元素以添加动态效果。

=== 示例：表单样式 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>表单样式示例</title>
    <style>
        #username {
            border: 2px solid #4CAF50;
            padding: 10px;
            width: 200px;
        }
    </style>
</head>
<body>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
    </form>
</body>
</html>
</syntaxhighlight>

== 注意事项 ==
1. '''避免过度使用ID选择器'''：由于ID选择器的优先级较高，过度使用可能导致样式难以维护。建议优先使用类选择器。
2. '''命名规范'''：ID名称应具有描述性，且遵循一致的命名约定（如使用小写字母和连字符）。

== 总结 ==
ID选择器是CSS中一种强大的工具，用于为页面中的唯一元素应用样式。它的高优先级和唯一性使其在某些场景下非常有用，但也需要注意合理使用以避免样式冲突。

== 参见 ==
* [[CSS类选择器]]
* [[CSS属性选择器]]
* [[CSS组合选择器]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS选择器]]