从 html 中包含 3 个单元格的部分中删除第一个单元格

Question

我在 Shopify 网站的页面上有一个包含 3 个单元格的部分。目标是从该部分中删除第一个和第二个单元格。我已成功删除第二个单元格，但似乎无法弄清楚我在删除第一个单元格时做错了什么。

我成功地在主题液体文件中使用此代码删除了第二个单元格

  <style>
#shopify-section-template--19687751713064__main > div > div > section > x-grid > x-cell:nth-child(2) {
    display: none !important;
}
</style>

我尝试更改为（1）以删除第一个单元格，但不成功。有什么明显的原因导致这不起作用吗？

  <style>
#shopify-section-template--19687751713064__main > div > div > section > x-grid > x-cell:nth-child(1) {
    display: none !important;
}
</style>

Answer 1

将

nth-child(2)

更改为

nth-child(1)

在代码中不起作用的原因可能是由于 CSS

nth-child

选择器的行为。

nth-child

选择器根据元素相对于父元素的位置来定位元素，从 1 开始。但是，如果父元素包含其他类型的元素（例如文本节点或空格），这些非元素节点也被计为子元素，影响目标元素的索引。

要排除非元素节点并专门针对第一个单元格，您可以使用

first-child

选择器。这是代码的更新版本：

<style>
#shopify-section-template--19687751713064__main > div > div > section > x-grid > x-cell:first-child {
    display: none !important;
}
</style>

通过使用

first-child

，您可以确保仅选择并隐藏第一个单元格元素。