html - Attributing CSS class to element

Question

Assuming I wanted to attribute the text-shadow: green; attribute to every <h2> element occouring inside an element with the classes .dark and ux-bannerwhat CSS code would achieve this?

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

As in the above example <h2> element will be wrapped in a <div> with varying classes attributed to it.

What would be the best way to apply the text-shadow: green; property to the <h2> element when occouring within elements that have the .dark and ux-banner classes attributed without making reference to the <div> immediately surrounding the <h2> element

score 12 · Accepted Answer

我相信您正在寻找：

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

这意味着：“在作为具有类和的元素的后代的text-shadow: green所有h2元素上设置。darkux-banner

或者，如果您想具体一点：

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

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

或超特定：

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

（仅适用于h2作为直接子元素的div元素的直接子元素的.dark.ux-banner元素。）

上面的关键位实际上是.dark.ux-banner（没有空格）意味着“具有这两个类的元素”。其余的只是后代或子组合器。

score 3 · Accepted Answer

3

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

http://jsfiddle.net/YjGhw/

于 2013-09-13T17:18:06.723 回答

score 3 · Accepted Answer

你会需要

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

这样做是选择具有该类的元素，.dark然后检查它是否具有该类，.ux-banner然后选择该类中的所有h2元素

score 0 · Accepted Answer

这很简单。只需使用以下内容：

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

这意味着h2具有这些类的元素内的每个元素都将具有该text-shadow:green属性，无论该h2元素是否在 a 内div。

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

or

<div class="dark ux-banner">
    <h2>
        TARGET THIS ELEMENT
    </h2>
</div>

will work the same ;)

score 0 · Accepted Answer

这是演示http://jsfiddle.net/tFScD/2/

      <div class="demo">
        <div class="the attributed classes of this element will vary">
         <h2>TARGET THIS ELEMENT
           </h2>
          </div>
      </div>


  .demo div h2{
         text-shadow:2px 2px green;
     }

score 0 · Accepted Answer

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

标记

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

演示：http: //jsfiddle.net/cQcbp/

在此处输入图像描述

html - Attributing CSS class to element

6 回答 6

Related

Reference