css - 我可以使用 css 更改内联数据属性(数据视差)的值吗？

Question

在 Wordpress 网站上，我想关闭某些页面的主题视差效果。我不确定使用的是什么库，我更愿意通过 CSS 尝试一下。代码是:

<div id="primary" class=" page-header header-small" data-parallax="active" style="transform: translate3d(0px, 0px, 0px);">...</div>

所以我的猜测是我能够以与覆盖内联 [style] 相同的方式定位“事件”:

.page-child #primary[data-parallax] {
content:'none';
}

这行不通，所以我选择了更简单的

.page-child #primary[style] {
transform: none;
}

我对 future 的问题是 – 是否有一种 CSS 方法来定位数据值？

Answer 1

将 data-parallax 属性设置为 "active" 的 div 元素作为目标，并关闭 translate3d 转换，使用以下代码:

[data-parallax="active"] {
  transform: translate3d(0);
}

---

为了笼统地回答您的问题，这些是您可以用来定位元素的可用属性选择器:

[data-value] {
  /* Attribute exists. */
}

[data-value="foo"] {
  /* Attribute has exact value "foo". */
}

[data-value*="foo"] {
  /* Attribute value contains value "foo" somewhere in it. */
}

[data-value~="foo"] {
  /* Attribute has value "foo" in a space-separated list somewhere. */
}

[data-value^="foo"] {
  /* Attribute value starts with "foo". */
}

[data-value|="foo"] {
  /* Attribute value starts with "foo" in a dash-separated list. */
}

[data-value$="foo"] {
  /* Attribute value ends with "foo". */
}