如何使用父级CSS选择器更精准地控制 Elementor 网格布局

在 Elementor 中，可以使用媒体查询来控制不同屏幕尺寸下的网格布局。例如，以下代码将 Elementor 网格布局在屏幕宽度小于 1024px 时调整为单列显示：

@media (max-width: 1024px) {
	.elementor-element-b97963f .elementor-grid-tablet-2 .elementor-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

为了更精准地控制 CSS 样式的应用范围，可以尝试将该代码放入一个父级 CSS 选择器中，例如：

.parent-class {
	@media (max-width: 1024px) {
		.elementor-element-b97963f .elementor-grid-tablet-2 .elementor-grid {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}

这样，只有当页面宽度小于 1024px 且该元素的父级元素有 class 名为 'parent-class' 时，该 CSS 代码才会生效。这样做可以更加精准地控制 CSS 样式的应用范围。