css - 避免工作表中的样式仅适用于一个元素

Question

我有一个样式表，其中包含影响页面中两个元素的样式，我无法更改元素的类，有没有办法确保样式仅适用于页面中的一个特定元素而不适用于另一个.

Answer 1

你试过第一个类型的选择器吗？

前任。

p:first-of-type {
  background:#ff0000;
}

Answer 2

是的。你可以通过特异性来做到这一点。

选择最顶层的父母并继续定位他们的孩子，直到您到达需要为其应用样式的最后一个子元素。

如果您可以为其添加一个 id 或者如果任何 id 是动态生成的，只需为其创建一个特异性，您就可以完成您的工作。

例如，

body div#your id name div.your_class1 > div.your_class_element_that_you_want_to_style{/* your values */}

希望这可以帮助。

PS：图中以 div 为参考，您可以根据自己的 HTML 结构选择元素。

Answer 3

如果有两个，则使用:first-of-type选择器：

div.selector:first-of-type {
    /* styles here */
}