在另一个类中使用属性设置 HTML 元素的样式答案

【问题标题】：Styling HTML element with attribute inside another class在另一个类中使用属性设置 HTML 元素的样式
【发布时间】：2013-05-13 03:52:52
【问题描述】：

我的 HTML 元素 有一个属性，目标是当在另一个类中找到该元素时为该元素赋予某种样式。

例如：

<style>
em {color:#ff0000;}
.emClass {color:#ff0000;}
.pClass em {color:#ff0000;}
.pClass .emClass  {color:#ff0000;}
</style>

<p>
    Please <em>red</em> me.
</p>

<p>
    Please <em class="emClass">red</em> me.
</p>

<p class="pClass">
    Please <em>red</em> me.
</p>

<p class="pClass">
    Please <span class="emClass">red</span> me.
</p>

<p class="pClass">
    Please <em class="emClass">orange</em> me.
</p>

目标是仅在以下情况下使用橙色文本：

是强调文字
AND 具有“emClass”属性
它是在另一个具有“pClass”的元素（段落或div）内属性。

（现场示例：https://jsfiddle.net/Yatko/Ffkcq/）

感谢您的帮助！

【问题讨论】：

这是您要找的吗？ jsfiddle.net/Ffkcq/1
您的元素都没有emClass 属性，但是其中一些元素确实有emClass 类名。跨度>

标签： css class css-selectors

【解决方案1】：

您只需要将您的课程更新为

.pClass em.emClass {
    color: orange;
}

查看fiddle

【讨论】：

正是我想要的。谢谢！

【解决方案2】：

试试这个：

.pClass em.emClass {color: #ffff00;}

【讨论】：

【解决方案3】：

您可以使用 CSS DEMO https://jsfiddle.net/kevinPHPkevin/Ffkcq/4/ 来做到这一点

em {

    color:#ff0000;

}

.emClass {

    color:#ff0000;

}

.pClass em {

    color:#ff0000;

}

.pClass .emClass {

    color:#ff0000;

}

.pClass em.emClass {

    color: #FAC802;

}

【讨论】：

【解决方案4】：

JSFiddle Demo

您可以在类名前加上元素类型。您应该像这样定位特定元素：

.pClass em.emClass  {color:orange;}
.pClass span.emClass  {color:red;}

【讨论】：