CSS 选择器：La Clave para estilizar tu Web

# Web 开发# CSS# 前端开发

选择器 **CSS 是网络设计的基础**。 Son la manera en que le decimos al navegador qué elementos queremos estilizar.单独选择的选项已通过属性、选择器的组合进行了组合，**没有任何选项可以控制我们的页面。**

在这篇文章中，探索 CSS 选择器的不同技巧，并使用正确的方法，以及与 JavaScript 或 jQuery 进行交互的重要性。**

¿Por Qué Son importantes los Selectores CSS？

选择器不是单独定义的，而是与 JavaScript 或 jQuery 元素进行交互的。许可的解释：

  • 优化 CSS：使用精确的选择器可以减少渲染过程中的不必要的操作。
  • 促进动态交互：使用 CSS 来选择正确的选择器可以直接使用 JavaScript 或 jQuery 框架来操作元素。
  • 保持设计软性和一致性：选择结构选择器，创建可重复利用的结构，并避免宏大项目中的冲突。

    • CSS 选择器分类

    CSS 选择器按主要类别划分：**简单和计算。** 该分类是一种组织和使用方式。

    1. 简单选择器

  • 通用选择器 (*)

    • 选择页面中的所有元素。 Aunque poderoso, debe usarse con cuidado ya que puedeimpactar negativamente el rendimiento si se aplica de forma indiscriminada.

    Image description
  • 类型或标签选择器

    • 选择特定类型的所有元素，如 **h1** 或 **p**。这是理想的基本应用或实现“重置”的方式，可以实现重置 CSS 和规范化 CSS。

    Image description
  • 分配者

    • 允许根据属性选择元素。儿子不可思议的多功能性和多种变体：

    -- **ID del elemento 👉 Utilizamos # seguido del nombre del ID**。这是重要的 ID 选择器**“敏感键”**，它是有意义的，因为在 HTML 中，您可以准确地书写 ID。

    Image description

    -- **Clase del elemento 👉 Utilizamos un punto (.) seguido del nombre de la Clase**。与 ID 的属性相同，子类别 **“关键敏感”**，但 ID 的类别与子类别之间存在差异，因为使用的元素与需要的元素不同。

    Image description
  • 归属感

    • Para este tipo de select nos apoyamos de los corchetes [], dentro colocaremos el atributo que desseamos seleccionar. El siguiente ejemplo, **应用 cualquier elemento con el atributo href.**

    Image description
  • 确切的归属值：

    • Podemos indicarle el valor que debe contener el atributo。 El siguiente ejemplo。 **应用一个 cualquier elemento con el atributo type y que su valor sea exactamente 按钮。**

    Image description
  • 个人价值：
  • Empieza con: [atributo^="valor"]
  • Contiene en cualquierparte: [atributo*="valor"]
  • 终端 con: [atributo$="valor"]
    • Image description

    2. 选择器

  • 选拔者

    • 允许使用不同的选择器组合和逗号。

    Image description
  • 组合选择师

    • 选择与其他元素相关的基本元素。

    -- **下降：** 👉 选择其他元素。

    Image description

    -- **Hijo directo (>):** 👉 选择 hijos directos 独奏。

    Image description

    -- **Hermano siguiente (+):** 👉 选择需要的元素。

    Image description

    -- **要完成的任务 (~):** 👉 选择要完成的任务，然后选择所需的元素。

    Image description

    CSS 选择器的实用实践

  • 美国特定选择器单独需要：Evita 美国选择器通用或其他特定选择器是不可预见的。
  • 优先使用 ID 类：这些类可重复使用，并且可灵活配置。
  • 最小化组合选择器的深度：请注意 CSS 中存在的一些问题。
  • 使用名词语义和说明：Ayuda a que otros desarrolladores (o túmismo en el futuro) entiendan rápidamente el propósito de un estilo。
  • 类似的选择器：减少各种元素的重复应用。

    • 选择器和与 JavaScript 或 jQuery 的关系

    CSS 选择器可以与 JavaScript 或 jQuery 交互，可以在 DOM 中选择元素。例如：

    **- 选择 JavaScript 元素**

    Image description

    **- 选择 jQuery 元素**

    Image description

    结论

    CSS 选择器是 Web 浏览器中必不可少的选择器。我们无法单独使用 JavaScript 和 jQuery 与 DOM 进行交互，因此无法单独使用有效的操作元素。理解当前选择器的不同选项，对代码进行优化，对位置进行最佳调整并保持一致的设计。

    快来了解一下选择器的深度理解，探索和实验 CSS 的能力吧！