Html 样式表仅应用于相对于样式元素本身的元素

我很抱歉，如果这个问题似乎没有信息和缺乏自己的研究，但我已经尝试搜索任何我能想到的谷歌，但仍然找不到任何关于它了

不久前，我还记得读过一些关于样式相对于它们声明的样式表的内容。我不完全确定这是否真的是我读到的页面上的意思，但我不知道我到底在哪里读到的，所以我不知道去哪里查看它。总之，这就是我从中得到的印象：

我要寻找的是一种方法，使其仅选择div中的span，该div中也有style标记

<div>
    <span class="special">Not red</span>
</div>
<div>
    <style>.special {color:red;}</style>
    <span class="special">Red</span>
</div>

不是红色的
.特殊{颜色：红色；}
红色

我知道这不起作用，但我不知道如何做，或者是否有可能在主体中插入样式标记，然后应用相对于该样式标记的样式

如果有人知道这是如何实现的（没有JavaScript），或者如果您绝对确定如果不为受影响的范围分配单独的类，这是不可能实现的，请告诉我

---

PS：元素出现的顺序可能不同，因此

div+div.special{color:red；}

或

div:last child.special{color:red；}

将不起作用。

常规CSS将对这些跨度应用不同的类。他们根本不同

如果您想解决这个问题，可以将类应用于它们的封闭div：

<div>
    <span class="special">Not red</span>
</div>
<div class="div-special">
    <span class="special">Red</span>
</div

---

编辑您可以在第二个跨度中添加第二个类，并在那里应用颜色

我相信您正在寻找

这里有一些链接

• （您需要确保目标浏览器可以使用它。）

---

因此，在您的示例中几乎是正确的，只需添加

scoped

属性

您可以在一个字段中使用多个类名，fe

。这会使工作更容易。另外，我不建议在HTML中使用样式标记。请使用css表。您阅读的内容是

作用域属性：
您的css
。现在的大多数浏览器都不支持它，但在将来这将是一种可能性，“scoped”属性已经被删除，从规范中删除。正确的方法是为每个元素使用不同的类，而不是试图解决名称冲突（“特殊”/“特殊”）
.div-special .special { color: red; }