css - 检查数据属性是否设置在父 div css/less 并将其用于子 div

Question

我有 div 标签，它关联了一个 data-type 属性。我想根据设置或不设置数据类型应用不同的样式。

<div data-type="type1">Hello, World!</div>

我可以检查这个属性 data-type 在 css/less 中是否设置了吗？这个问题用this解决了.

---

但是，如果我只将此 data-type 属性应用于父 div，我是否可以将此属性用于所有子 div标签也是如此。 例如，

<div data-type=`type1`>
  <div id="newDiv"> </div>
</div>

在我的 CSS 中，我想根据为其父级设置的任何类型 (data-type) 为 #newDiv 应用不同的样式。我也不想为子 div 指定 data-type 属性。我们如何在 CSS 中做到这一点？

Answer 1

您可以使用 :not([data-type]) 选择任何没有设置 data-type 属性的元素，而不管使用的值是什么。

基本工作示例:

div:not([data-type]) {
  color: red;
}

<div data-type="type1">Hello, World!</div>

<div>Hello, World!</div>

---

或者，您可以反其道而行之，使用 [data-type] 选择任何设置了 data-type 属性的内容，而不管其值如何

工作示例:

div[data-type] {
  color: red;
}

<div data-type="type1">Hello, World!</div>

<div>Hello, World!</div>

---

如果你想定位一个子 div，其父 div 设置了 data-type 属性，你可以使用这样的东西:

div[data-type]>h1 {
  color: red;
}

<div data-type="type1">Hello, World!
  <h1> How are you?!</h1>
</div>

<hr>

<div>Hello, World!
  <h1> How are you?!</h1>
</div>

这也可以根据您的选择器首选项进行逆转，以将未设置 data-type 属性集的父元素的子元素作为目标。

div:not([data-type])>h1 {
  color: red;
}

<div data-type="type1">Hello, World!
  <h1> How are you?!</h1>
</div>

<hr>

<div>Hello, World!
  <h1> How are you?!</h1>
</div>

---

如果您有更复杂的结构，您可以使用通配符 * 选择器来构建匹配非常广泛的模式的选择器。这些字母表示元素所在树的深度，aaa 是直接子元素，bbb 是孙元素...等

基本示例:

[data-type] * h1,
[data-type] h1 {
  color: red;
}

<div data-type="type1">
  <h1> aaa</h1>
</div>

<hr>

<div>
  <h1> aaa</h1>
</div>

<hr>

<div id="test" data-type="type1">
  <div>
    <h1> bbb</h1>
    <div>
      <h1> ccc</h1>
    </div>
  </div>
  <h1 class="wow"> aaa</h1>
  <div>
    <h1 class="wow"> bbb</h1>
  </div>
</div>

<hr>

<div id="test">
  <h1 class="wow"> aaa</h1>
  <div>
    <div>
      <h1> ddd</h1>
    </div>
    <h1 class="wow"> ccc</h1>
  </div>
</div>