3. CSS选择器_css id选择器-CSDN博客

本文链接：https://blog.csdn.net/molangmolang/article/details/140252371

3. CSS选择器

- 3. CSS选择器

3. CSS选择器

3.1 标签选择器

标签选择器是CSS中最基本的选择器之一，它根据HTML元素的标签名来选择元素。使用标签选择器可以对页面上所有相同类型的元素应用统一的样式。

3.1.1 基本用法

标签选择器的使用方法非常简单，直接使用元素的标签名即可。例如，要为所有的段落元素 <p> 应用样式，可以这样做：

p {
  color: blue;
  font-size: 16px;
}

在这个例子中，p 就是一个标签选择器，它会选择页面上所有的 <p> 元素，并将文本颜色设置为蓝色，字体大小设置为16像素。

3.1.2 标签选择器与样式继承

标签选择器不仅可以直接应用于元素，还可以影响子元素的样式，尤其是那些可继承的样式属性，如 color 和 font-family。例如：

div {
  font-family: Arial, sans-serif;
}

在这个例子中，div 选择器将字体设置为 Arial，所有在 div 元素内的文本，包括嵌套的子元素，都会继承这个字体设置，除非被其他规则覆盖。

3.1.3 标签选择器与组合选择器

标签选择器可以与其他类型的选择器结合使用，创建更具体的样式规则。例如，要为特定的类或ID的元素设置样式，可以结合使用类选择器或ID选择器：

div.main {
  background-color: yellow;
}

p#intro {
  font-size: 20px;
}

这里，div.main 会选择所有类名为 main 的 div 元素，而 p#intro 会选择ID为 intro 的 p 元素。

3.1.4 标签选择器的局限性

虽然标签选择器易于使用，但它的特异性较低，容易被其他更具体的选择器覆盖。此外，使用标签选择器可能会对页面上所有该类型的元素应用样式，有时这可能不是所希望的。因此，通常建议将标签选择器与其他选择器结合使用，以提高规则的特异性和精确度。

3.1.5 实例应用

标签选择器在实际的网页设计中应用广泛，例如：

统一设置页面中所有标题的样式。
为所有链接设置统一的样式，包括悬停和点击状态。
为特定类型的表单元素（如输入框、按钮）设置样式。

标签选择器是CSS中的基础工具，通过与其他选择器和CSS属性的结合使用，可以创建出丰富多样的网页样式。掌握标签选择器的使用方法对于任何前端开发者来说都是基本且必要的。

3.2 类选择器

类选择器在CSS中用于为目标元素指定一个或多个类名，从而允许开发者为这些元素定义特定的样式。类选择器非常灵活，是实现样式重用和组织样式表的关键工具。

3.2.1 基本用法

类选择器以点（.）开头，后跟类名。在HTML中，类名通过元素的 class 属性指定。例如：

/* CSS */
.example {
  color: red;
  font-size: 20px;
}

<!-- HTML -->
<p class="example">这是一个示例段落。</p>
<div class="example">这是一个示例div。</div>

在这个例子中，所有具有 class="example" 的元素都将应用 .example 类选择器定义的样式。

3.2.2 类选择器的优势

可重用性：通过类选择器，相同的样式可以应用于页面上的多个元素，而无需重复代码。
组织性：类选择器允许开发者逻辑地组织样式，使得样式表更加清晰和易于管理。
特异性：类选择器具有中等的特异性，通常只比标签选择器和伪类选择器低，使得它们在层叠样式表中相对容易覆盖。

3.2.3 组合使用类选择器

类选择器可以与其他类型的选择器结合使用，以创建更具体的样式规则。例如：

div.example {
  background-color: yellow;
}

.example.highlight {
  font-weight: bold;
}

这里，div.example 会选择所有类名为 example 的 div 元素，而 .example.highlight 会选择同时具有 example 和 highlight 类的元素。

3.2.4 多个类的选择

HTML元素可以同时拥有多个类，CSS也可以选择具有多个类的元素：

.example.primary {
  color: green;
}

这个选择器会选择同时具有 example 和 primary 两个类的元素。

3.2.5 类选择器与伪类

类选择器还可以与伪类结合使用，以定义元素在特定状态下的样式：

.example:hover {
  color: blue;
}

这个规则将改变鼠标悬停在具有 example 类的元素上时的文本颜色。

3.2.6 实例应用

类选择器在实际的网页设计中应用广泛，例如：

为特定的布局组件设置样式，如导航栏、侧边栏、按钮等。
为响应式设计中的不同屏幕尺寸定义样式。
为表单元素的状态（如聚焦、禁用）定义样式。

3.2.7 注意事项

命名规范：为了保持一致性和可读性，建议使用有意义的类名，避免使用过于通用或模糊的名称。
避免过度使用：虽然类选择器非常灵活，但过度使用可能导致样式表过于复杂和难以维护。合理组织类名和样式规则是关键。

类选择器是CSS中非常强大的工具，通过合理使用类选择器，可以创建出既美观又功能强大的网页样式。掌握类选择器的使用方法对于任何前端开发者来说都是基本且必要的。

3.3 ID选择器

ID选择器在CSS中用于通过元素的ID属性来选择特定的元素。每个ID在页面中应该是唯一的，这使得ID选择器具有非常高的特异性，通常用于页面中非常特定的元素。

3.3.1 基本用法

ID选择器以井号（#）开头，后跟ID的名称。在HTML中，ID通过元素的 id 属性指定。例如：

/* CSS */
#uniqueElement {
  color: green;
  font-size: 24px;
}

<!-- HTML -->
<div id="uniqueElement">这是页面中唯一的元素。</div>

在这个例子中，ID选择器 #uniqueElement 会选择页面上ID为 uniqueElement 的 div 元素，并应用定义的样式。

3.3.2 ID选择器的优势

唯一性：每个ID在页面中应该是唯一的，这使得ID选择器非常适合用于页面中非常特定的元素。
高特异性：ID选择器具有比类选择器和标签选择器更高的特异性，使得它们在样式冲突时通常具有更高的优先级。

3.3.3 组合使用ID选择器

ID选择器也可以与其他类型的选择器结合使用，以创建更具体的样式规则。例如：

div#mainContent {
  background-color: lightblue;
}

这里，div#mainContent 会选择所有ID为 mainContent 的 div 元素。

3.3.4 ID选择器与伪类

ID选择器还可以与伪类结合使用，以定义元素在特定状态下的样式：

#submitButton:hover {
  background-color: red;
}

这个规则将改变鼠标悬停在ID为 submitButton 的按钮上时的背景颜色。

3.3.5 实例应用

ID选择器在实际的网页设计中应用广泛，例如：

为页面中唯一的元素，如页脚、导航栏、特定的文章或部分设置样式。
为特定的交互元素，如按钮、弹窗、警告框定义样式。

3.3.6 注意事项

唯一性：确保每个ID在页面中只使用一次，以保持其高特异性和唯一性。
避免过度使用：由于ID选择器的高特异性，过度使用可能导致样式表难以维护。通常建议使用类选择器来实现样式的重用。
可维护性：在大型项目中，过度依赖ID选择器可能会使得样式表变得复杂和难以管理。

ID选择器是CSS中非常强大的工具，通过合理使用ID选择器，可以精确地控制页面中特定元素的样式。掌握ID选择器的使用方法对于任何前端开发者来说都是基本且必要的。

3.4 属性选择器

属性选择器是CSS中一种强大的选择器，它允许开发者根据元素的属性和属性值来选择元素。这使得样式可以应用到具有特定属性或属性值的任何元素上，增加了样式应用的灵活性和精确性。

3.4.1 基本用法

属性选择器的基本语法是使用方括号 [] 包围属性名和可选的属性值。例如：

/* 选择所有带有 title 属性的元素 */
[title] {
  color: purple;
}

<!-- HTML -->
<img src="image.jpg" alt="示例图片" title="这是一个图片">
<p title="提示信息">这是一个段落。</p>

在这个例子中，所有具有 title 属性的元素（无论是图片还是段落）都将应用紫色文本。

3.4.2 属性选择器的类型

属性选择器可以根据不同的条件来选择元素：

存在属性：选择具有指定属性的元素，无论属性值是什么。
完全匹配属性值：选择属性值完全匹配指定值的元素。
包含特定单词的属性值：选择属性值中包含特定单词的元素。
属性值开始或结束于特定字符串：选择属性值以特定字符串开始或结束的元素。
属性值包含特定字符串：选择属性值包含特定字符串的元素。

3.4.3 示例

以下是一些属性选择器的示例：

/* 选择属性值完全匹配 "demo" 的元素 */
[attr="demo"] {
  font-weight: bold;
}

/* 选择属性值包含 "demo" 的元素 */
[attr*="demo"] {
  color: green;
}

/* 选择属性值以 "demo" 开始的元素 */
[attr^="demo"] {
  font-style: italic;
}

/* 选择属性值以 "demo" 结束的元素 */
[attr$="demo"] {
  text-decoration: underline;
}

/* 选择属性值包含 "demo" 单词的元素 */
[attr~="demo"] {
  background-color: yellow;
}

3.4.4 组合使用属性选择器

属性选择器可以与其他选择器结合使用，以创建更具体的样式规则：

/* 选择所有类名为 "example" 且具有 "type" 属性为 "text" 的输入框 */
input.example[type="text"] {
  border: 2px solid blue;
}

3.4.5 实例应用

属性选择器在实际的网页设计中应用广泛，例如：

为表单元素定义特定的样式，如 <input type="email">。
为带有特定 data-* 属性的元素定义样式，以实现更复杂的组件或行为。
为带有特定 role 属性的可访问性元素定义样式。

3.4.6 注意事项

性能：过度使用属性选择器可能会影响页面的性能，因为浏览器需要检查每个元素的属性。
可维护性：合理使用属性选择器，避免创建过于复杂或难以理解的样式规则。

属性选择器提供了一种非常灵活的方式来选择元素并应用样式，使得开发者可以根据元素的属性和属性值来精确控制样式。掌握属性选择器的使用方法对于任何前端开发者来说都是非常有用的。

3.5 伪类和伪元素

伪类和伪元素是CSS中用于添加特殊效果和选择元素的特定部分的强大工具。它们扩展了CSS的选择器功能，允许开发者对文档树中不存在的元素进行样式设置，以及对元素的不同状态进行样式控制。

3.5.1 伪类（Pseudo-classes）

伪类用于向选择器添加特定状态的条件。以下是一些常用的伪类：

:hover：鼠标悬停在元素上时。
:active：元素被激活（如点击）时。
:focus：元素获得焦点时。
:nth-child()：选择其父元素的特定子元素。
:nth-of-type()：选择其父元素的特定类型子元素。
:first-child：选择其父元素的第一个子元素。
:last-child：选择其父元素的最后一个子元素。
:checked：选择被选中的单选按钮或复选框。

示例

a:hover {
  color: red;
}

input:focus {
  border: 2px solid blue;
}

li:nth-child(2) {
  font-weight: bold;
}

3.5.2 伪元素（Pseudo-elements）

伪元素用于选择元素的某个部分，这些部分在DOM中并不存在。以下是一些常用的伪元素：

::before：在元素的内容前面插入内容。
::after：在元素的内容后面插入内容。
::first-letter：选择元素的第一个字母。
::first-line：选择元素的第一行。
::selection：选择用户选择的元素部分。

示例

p::before {
  content: ">";
  color: green;
}

button::after {
  content: " 点击我";
  font-weight: bold;
}

h1::first-letter {
  font-size: 24px;
  font-weight: bold;
}