前端技术中对css的选择器的学习

css选择器

---

目录

• css选择器
  • 通配符选择器
  • 类型选择器
  • id选择器
  • 类选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器
  • 关系选择器
  • 分组选择器

通配符选择器

通配符选择器的基本语法非常简单，就是直接使用一个星号（*）作为选择器，后跟一对大括号，里面定义要应用的样式规则。例如：

* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}

上面的代码会将页面上所有元素的外边距（margin）和内边距（padding）都设置为0，同时将盒模型的计算方式设置为border-box，这有助于在布局时更好地控制元素的尺寸。

使用场景

1. 初始化样式：在CSS文件的开头使用通配符选择器来设置一些基本的样式，如清除元素的默认边距和填充，设置字体大小、行高等，以确保页面在不同浏览器中的表现尽可能一致。
2. 全局样式调整：如果需要为页面上所有元素设置某种全局性的样式，如字体、背景色等，通配符选择器也是一个很好的选择。但需要注意的是，过度使用通配符选择器可能会影响页面的渲染性能，因为它会匹配到页面上的所有元素。
3. 特定场景下的应用：在某些特定场景下，如需要为某个特定类名的元素及其所有后代元素设置样式时，也可以结合通配符选择器来实现。但这种情况下，需要谨慎使用，以免对不需要的元素也应用了样式。

注意事项

1. 性能影响：虽然通配符选择器在某些情况下非常有用，但过度使用它可能会对页面的渲染性能产生负面影响。因此，在实际开发中，应根据需要谨慎选择是否使用通配符选择器。
2. 优先级问题：通配符选择器设置的样式规则具有较低的优先级，如果与其他选择器（如类选择器、ID选择器等）设置的样式规则发生冲突，则其他选择器的样式规则将优先应用。
3. 可维护性：在大型项目中，过度使用通配符选择器可能会降低代码的可维护性。因此，在编写CSS代码时，应尽量使用更具体、更有针对性的选择器来指定样式规则。

类型选择器

类型选择器的语法非常简单，直接使用HTML元素的名称即可。例如：

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

上面的代码会将页面上所有<p>元素的文字颜色设置为蓝色，字体大小设置为16像素。

使用场景

类型选择器适用于需要对页面上某一类元素统一设置样式的场景。例如，你可能想要将所有段落文字的字体设置为宋体，将所有标题的字体大小设置为特定值，这时就可以使用类型选择器来实现。

注意事项

1. 特异性：类型选择器的特异性较低，当存在多个样式规则冲突时，特异性更高的规则将优先应用。因此，在使用类型选择器时，可能需要考虑与其他选择器的特异性关系。
2. 效率：虽然类型选择器在语法上简单直接，但在大型项目中，过度使用类型选择器可能会导致样式表变得庞大且难以维护。因此，建议根据实际情况合理选择使用类型选择器。
3. 组合使用：类型选择器可以与其他类型选择器、类选择器、ID选择器等组合使用，以实现更精确的选择和样式设置。例如，div p会选择所有位于<div>元素内部的<p>元素。

id选择器

id选择器的基本语法如下：

#elementId {  
    /* 样式规则 */  
}

其中，elementId是HTML元素的id属性值。例如，如果有一个HTML元素<div id="header">，那么可以使用以下CSS规则来为这个元素设置样式：

#header {  
    background-color: #f0f0f0;  
    padding: 20px;  
}

特性

1. 唯一性：在同一个HTML文档中，id属性的值必须是唯一的。这意味着id选择器通常用于选择单个元素，并为其应用特定的样式。
2. 高特异性：由于id的唯一性，id选择器在CSS中具有很高的特异性。当多个样式规则冲突时，id选择器定义的规则将优先应用。
3. 使用限制：虽然理论上可以在一个HTML文档中使用多个相同的id值，但这是不推荐的，并且可能导致不可预测的行为，特别是在使用JavaScript等脚本语言时。

使用场景

id选择器适用于以下场景：

1. 页面布局：用于设置页面中重要元素（如页眉、页脚、导航栏等）的样式。
2. 唯一元素样式：当需要为页面中的某个唯一元素设置特定样式时，可以使用id选择器。
3. JavaScript交互：由于id的唯一性，它经常与JavaScript一起使用，以便通过JavaScript轻松地访问和操作特定的HTML元素。

注意事项

1. 命名规范：id的名称应该具有一定的描述性，以便于理解和维护。同时，它应该遵循HTML和CSS的命名规范，如不能以数字开头，不能包含空格等。
2. 避免滥用：虽然id选择器在CSS中具有很高的特异性，但应避免滥用。对于需要应用到多个元素的样式，应该使用类选择器（class selector）或其他选择器。
3. 兼容性：几乎所有的现代浏览器都支持id选择器，因此在使用时无需担心兼容性问题。但是，为了确保最佳的跨浏览器兼容性，建议遵循HTML和CSS的标准和规范。

类选择器

类选择器以点号（.）开头，后跟类名（class name）。在HTML中，元素的class属性可以包含一个或多个类名，类名之间用空格分隔。在CSS中，通过类选择器可以为具有特定类名的元素设置样式。

语法示例：

.className {  
    /* 样式规则 */  
}

其中，className是HTML元素class属性中的类名。

使用场景

类选择器适用于以下场景：

1. 多元素共享样式：当页面中有多个元素需要应用相同的样式时，可以将这些元素的class属性设置为相同的类名，并通过类选择器为它们设置样式。这样做可以节省CSS代码，提高样式的复用性。
2. 主题样式：在构建具有多个主题或皮肤的应用程序时，可以使用类选择器来切换不同的主题样式。通过为不同的主题定义不同的类名，并在需要时更改元素的class属性，可以轻松实现主题的切换。
3. 动态样式：在Web开发中，有时需要根据用户的交互行为来动态地改变元素的样式。通过使用JavaScript来动态地添加或移除元素的class属性，并结合类选择器来设置样式，可以实现这一需求。

注意事项

1. 类名的命名规范：类名应该具有描述性，以便于理解和维护。同时，类名应该遵循CSS的命名规范，如不能以数字开头，不能包含空格等。建议使用小写字母和短横线（-）来分隔单词。
2. 特异性：类选择器在CSS中的特异性介于元素选择器和ID选择器之间。当多个样式规则冲突时，特异性更高的规则将优先应用。
3. 兼容性：几乎所有的现代浏览器都支持类选择器，因此在使用时无需担心兼容性问题。但是，为了确保最佳的跨浏览器兼容性，建议遵循HTML和CSS的标准和规范。

属性选择器

属性选择器的基本语法如下：

[attribute=value] {  
    /* 样式规则 */  
}

其中，attribute是元素的属性名，value是该属性的值。只有当元素的属性及其值完全匹配时，该选择器才会选中该元素。

此外，属性选择器还支持多种匹配模式，如：

• [attribute^=value]：选择属性值以指定值开头的元素。
• [attribute$=value]：选择属性值以指定值结尾的元素。
• [attribute*=value]：选择属性值中包含指定值的元素。
• [attribute|=value]：选择属性值等于指定值或以指定值后跟连字符（-）开头的元素。这主要用于选择语言代码。
• [attribute~=value]：选择属性值中包含一个由空格分隔的单词，且该单词等于指定值的元素。

使用场景

属性选择器适用于以下场景：

1. 基于特定属性值的样式设置：当需要根据元素的某个属性值来设置样式时，可以使用属性选择器。例如，可以选择所有具有特定type属性的<input>元素，并为它们设置不同的样式。
2. 动态内容的样式控制：在动态生成的HTML内容中，元素的属性可能会根据数据的变化而变化。使用属性选择器可以根据这些动态变化的属性来设置样式，从而实现更灵活的样式控制。
3. 提高样式的可维护性：通过为具有特定属性的元素设置样式，可以减少对类名或ID的依赖，从而提高样式的可维护性。当HTML结构发生变化时，只要元素的属性保持不变，就可以保持样式的一致性。

注意事项

1. 属性选择器的权重：属性选择器的权重较低，通常低于类选择器和ID选择器。因此，在存在多个样式规则冲突时，权重更高的规则将优先应用。
2. 性能考虑：虽然属性选择器提供了强大的选择能力，但过度使用或滥用可能会导致性能问题。特别是在处理大量元素和复杂选择器时，应谨慎使用属性选择器以避免不必要的性能开销。
3. 浏览器兼容性：几乎所有的现代浏览器都支持属性选择器。然而，在开发跨浏览器兼容的Web应用时，仍需注意检查目标浏览器对属性选择器的支持情况。

伪类选择器

[:active]	a:active	选择活动链接	1
[:hover]	a:hover	选择鼠标在链接上面时	1
[:focus]	input:focus	选择具有焦点的输入元素	2
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级第二个子元素	3

伪元素选择器

伪元素选择器以双冒号（::）开头（在旧版本的CSS中，伪元素选择器使用单冒号，但根据最新的CSS规范，应使用双冒号以区分伪类选择器），后跟伪元素的名称。其基本语法如下：

selector::pseudo-element {  
    /* CSS属性和值 */  
}

其中，selector为目标元素选择器，pseudo-element为伪元素的名称。

常见伪元素选择器

1. ::before：在元素内容之前插入新的内容。这个伪元素经常与content属性一起使用，以指定要插入的内容。
2. ::after：在元素内容之后插入新的内容。与::before类似，它也经常与content属性一起使用。
3. ::first-letter：选择元素内文本的首字母，并允许为其设置特殊样式。
4. ::first-line：选择元素内文本的首行，并允许为其设置特殊样式。
5. ::selection：用于改变用户选中元素的默认样式（如文本和背景颜色）。需要注意的是，::selection伪元素选择器只支持有限的CSS属性，如color、background、cursor和outline。

使用场景

伪元素选择器在网页设计中有着广泛的应用场景，包括但不限于：

• 添加装饰性内容：使用::before和::after伪元素在元素前后添加图标、引号或其他装饰性元素，以增强页面的视觉效果。
• 文本样式定制：通过::first-letter和::first-line伪元素为文本的首字母或首行设置特殊样式，如改变字体大小、颜色或应用其他文本效果。
• 用户交互反馈：利用::selection伪元素改变用户选中文本的样式，提供直观的交互反馈。

注意事项

• 内容生成：当使用::before和::after伪元素时，必须配合content属性来指定要生成的内容。如果省略了content属性，伪元素将不会生成任何内容，因此也不会显示。
• 样式继承：伪元素继承其父元素的某些样式，但并非所有样式都会继承。开发者需要根据需要为伪元素显式设置样式。
• 浏览器兼容性：虽然现代浏览器普遍支持伪元素选择器，但在开发跨浏览器兼容的Web应用时，仍需注意检查目标浏览器对伪元素选择器的支持情况。

关系选择器

后代选择器（Descendant Selector）

定义：选择所有被E元素包含的F元素，中间用空格隔开。这种选择器会选中E元素内部的所有F元素，不论它们之间的层级有多深。

语法：E F

示例：div p 会选中所有在<div>元素内部的<p>元素，不论它们是否直接嵌套在<div>下。

子代选择器（Child Selector）

定义：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。这种选择器只会选中直接嵌套在E元素下的F元素。

语法：E > F

示例：ul > li 会选中所有直接嵌套在<ul>元素下的<li>元素，而不会选中<li>元素内部的<li>元素（如果有的话）。

相邻兄弟选择器（Adjacent Sibling Selector）

定义：选择紧跟E元素后的F元素，用加号+表示，选择相邻的第一个兄弟元素。这种选择器会选中紧跟在E元素之后，且与E元素具有相同父元素的第一个F元素。

语法：E + F

示例：h1 + p 会选中紧跟在<h1>元素之后的第一个<p>元素，前提是这两个元素具有相同的父元素。

通用兄弟选择器（General Sibling Selector）

定义：选择E元素之后的所有兄弟元素F，作用于多个元素，用波浪线~隔开。这种选择器会选中E元素之后，且与E元素具有相同父元素的所有F元素，不论它们之间的顺序如何。

语法：E ~ F

示例：h1 ~ p 会选中所有在<h1>元素之后，且与<h1>具有相同父元素的<p>元素。

分组选择器

分组选择器通过逗号（,）分隔多个选择器，并将它们包含在一对大括号（{}）中，以应用相同的样式规则。其基本语法如下：

selector1, selector2, selectorN {  
    /* CSS属性和值 */  
}

其中，selector1、selector2、selectorN 表示多个不同的选择器，它们可以是元素选择器、类选择器、ID选择器或任何其他类型的选择器。这些选择器之间用逗号分隔，表示它们将共享大括号中的样式规则。

使用场景

分组选择器在以下场景中特别有用：

1. 多个元素共享相同样式：当页面中有多个元素需要应用相同的样式时，可以使用分组选择器来避免重复编写相同的样式规则。例如，如果想让所有段落（<p>）和标题（<h1>、<h2>、<h3>）都使用相同的字体大小和颜色，可以编写如下CSS代码：

   p, h1, h2, h3 {  
       font-size: 16px;  
       color: #333;  
   }
   

2. 提高代码可读性：通过将具有相同样式的选择器组合在一起，可以使CSS代码更加整洁和易于理解。这有助于其他开发者（或未来的你）更快地浏览和修改样式表。

3. 减少代码量：使用分组选择器可以减少CSS文件中的代码量，从而加快页面的加载速度。这是因为浏览器只需要解析一次共享的样式规则，并将其应用到所有指定的元素上。

注意事项

• 避免过度使用：虽然分组选择器可以提高代码的可读性和可维护性，但过度使用可能会导致样式表变得难以管理。因此，在编写CSS时，应该根据具体情况决定是否使用分组选择器。
• 选择器优先级：当多个选择器应用于同一个元素时，浏览器会根据选择器的优先级来决定应用哪个样式规则。分组选择器本身并不改变选择器的优先级；它只是将多个选择器组合在一起以共享样式规则。
• 兼容性：分组选择器是CSS的基本特性之一，得到了所有现代浏览器的广泛支持。因此，在编写跨浏览器兼容的Web应用时，无需担心分组选择器的兼容性问题。