元素类和ID结构

关于id和类的结构

在元素中添加类或id时，一定要记住这一点通常，一个单一的“元素”实际上是由多个部分(“部分”)组成的。．因此，类或ID的输入偶尔会出现在多个部分中。此外，对于ID，可能会稍微修改，因为在一个页面上一次只能有一个唯一的ID(稍后将详细介绍)。

添加类

如果你添加一个类我的购物车到一个购物车模态，这个类会同时出现在触发模式的切换以及模式本身上。这是因为这两个部分组成了一个整体的模态，你可能希望针对其中一个或另一个，或两个。正因为如此，如果您只想针对元素的一部分，您将希望将它与元素上的另一个类配对以指定您想要的部分。如果你想要锁定切换，你可以使用.my-cart.x-anchor，或者你可以使用的情态动词.my-cart.x-modal．

此外，一些元素将具有所谓的模块容器周围。这主要适用于带有触发器的元素，因为模块容器被用作所有内容的相对包装器，以正确地定位下拉列表。在这些情况下，一个自定义类也将被添加到这个模块容器中。扩展之前的示例，您可以使用.my-cart.x-mod-container．

添加id

添加ID的工作原理类似于类，自定义ID将输出到元素的所有部分(包括mod容器，如果适用)，但这里有一个关键的区别:如果元素中有多个部分，则自定义ID的末尾可能会添加一个附加值．例如，如果添加的ID为我的购物车到一个购物车模态，切换将收到一个IDmy-cart-anchor-toggle实际的模态将接收一个IDmy-cart-modal．这是必要的，因为一个唯一的ID只能在一个页面上使用一次，所以如果我们只输出我的购物车作为两个部分的ID，这不仅是无效的标记，而且如果在任何自定义脚本中使用该ID，可能会导致问题。

此外，如果元素被包装在模块容器中，最外层的包装元素将不受影响地接收ID。添加一个ID我的购物车到一个车下拉将意味着模块容器包装的切换和下拉将收到我的购物车作为ID，不做任何更改。

元素列表

我们在下面列出了这个列表，作为不同元素如何影响类和id输出的快速参考。对于每个元素，我们将假设一个自定义类el-c的自定义IDel-id．我们将使用CSS选择器来显示类和ID的最终输出，以及该ID发生的任何更改。

警报

类

• .x-alert.el-c

id

• .x-alert # el-id

音频

类

• .x-audio.el-c

id

• .x-audio # el-id

面包屑

类

• .x-crumbs.el-c

id

• .x-crumbs # el-id

按钮

类

• .x-anchor.el-c

id

• .x-anchor # el-id(在Pro v1.2.7和X v5.2.5之后可用，否则，# el-id-anchor-button）

车下拉

类

• .x-mod-container.el-c
• .x-anchor.el-c
• .x-dropdown.el-c

id

• .x-mod-container # el-id
• .x-anchor # el-id-anchor-toggle
• .x-dropdown # el-id-dropdown

购物车模态

类

• .x-anchor.el-c
• .x-modal.el-c

id

• .x-anchor # el-id-anchor-toggle
• .x-modal # el-id-modal

帆布车

类

• .x-anchor.el-c
• .x-off-canvas.el-c

id

• .x-anchor # el-id-anchor-toggle
• .x-off-canvas # el-id-off-canvas

内容区域

类

• .x-bar-content-area.el-c

• id

• .x-bar-content-area # el-id

内容区下拉菜单

类

• .x-mod-container.el-c
• .x-anchor.el-c
• .x-dropdown.el-c

id

• .x-mod-container # el-id
• .x-anchor # el-id-anchor-toggle
• .x-dropdown # el-id-dropdown

内容区域模式

类

• .x-anchor.el-c
• .x-modal.el-c

id

• .x-anchor # el-id-anchor-toggle
• .x-modal # el-id-modal

画布以外的内容区

类

• .x-anchor.el-c
• .x-off-canvas.el-c

id

• .x-anchor # el-id-anchor-toggle
• .x-off-canvas # el-id-off-canvas

计数器

类

• .x-counter.el-c

id

• .x-counter # el-id

差距

类

• .x-line.el-c

id

• .x-line # el-id

标题

类

• .x-text.el-c

id

• .x-text # el-id

图像

类

• .x-image.el-c

id

• .x-image # el-id

行

类

• .x-line.el-c

id

• .x-line # el-id

地图

类

• .x-frame.el-c

id

• .x-frame # el-id

导航倒塌

类

• .x-menu.el-c(内容生成器和头生成器的左/右区域)
• .x-anchor.el-c(页脚构建器和页眉构建器的顶部/底部区域)
• .x-off-canvas.el-c(页脚构建器和页眉构建器的顶部/底部区域)

id

• .x-menu # el-id(内容生成器和头生成器的左/右区域)
• .x-anchor # el-id-anchor-toggle(页脚构建器和页眉构建器的顶部/底部区域)
• .x-off-canvas # el-id-off-canvas(页脚构建器和页眉构建器的顶部/底部区域)

导航下拉

类

• .x-mod-container.el-c
• .x-anchor.el-c
• .x-dropdown.el-c

id

• .x-mod-container # el-id
• .x-anchor # el-id-anchor-toggle
• .x-dropdown # el-id-dropdown

导航内联

类

• .x-menu.el-c

id

• .x-menu # el-id

导航模态

类

• .x-anchor.el-c
• .x-modal.el-c

id

• .x-anchor # el-id-anchor-toggle
• .x-modal # el-id-modal

搜索下拉

类

• .x-mod-container.el-c
• .x-anchor.el-c
• .x-dropdown.el-c

id

• .x-mod-container # el-id
• .x-anchor # el-id-anchor-toggle
• .x-dropdown # el-id-dropdown

搜索内联

类

• .x-search.el-c

id

• .x-search # el-id

搜索模式

类

• .x-anchor.el-c
• .x-modal.el-c

id

• .x-anchor # el-id-anchor-toggle
• .x-modal # el-id-modal

社会

类

• .x-anchor.el-c

id

• .x-anchor # el-id(在Pro v1.2.7和X v5.2.5之后可用，否则，# el-id-anchor-button）

文本

类

• .x-text.el-c

id

• .x-text # el-id

视频

类

• .x-frame.el-c

id

• .x-frame # el-id

小部件区域

类

• .x-bar-widget-area.el-c

id

• .x-bar-widget-area # el-id

总结

您已经成功地学习了如何在元素中使用类和id。