html - 将 CSS 类赋予元素

Question

假设我想归因于 text-shadow: green;属性到每个 <h2>元素出现在具有类 .dark 的元素内和 ux-banner什么 CSS 代码可以实现这一点？

 <div class="dark ux-banner">
      <div class="the attributed classes of this element will vary">
           <h2>TARGET THIS ELEMENT
           </h2>
      </div>
 </div>

如上例<h2>元素将被包装在 <div> 中具有不同的类别。

应用 text-shadow: green; 的最佳方式是什么？属性(property)给<h2>出现在具有 .dark 的元素中时的元素和 ux-banner未引用 <div> 的类属性紧邻<h2>元素

Answer 1

我相信您正在寻找:

.dark.ux-banner h2 {
    text-shadow: green;
}

这意味着:“在所有 h2 元素上设置 text-shadow: green，这些元素是具有 两个 类的元素的后代 dark 和 ux-banner。

或者，如果您想更具体一些:

.dark.ux-banner div h2 {
    text-shadow: green;
}

(仅适用于 .dark.ux-banner 元素内的 div 元素内的 h2 元素。)

或超特定:

.dark.ux-banner > div > h2 {
    text-shadow: green;
}

(仅适用于 h2 元素，它们是 div 元素的直接子元素，直接子元素 .dark.ux-banner 元素。)

上面的关键点实际上是 .dark.ux-banner(没有空格)表示“具有两个这些类的元素”。其余的只是后代或子组合器。