Css选择器冲突

Question

我在我的博客中添加了一个图库功能，而图库就像这样。

<ul id="pikeme" class="pika-thumbs">
 <li>image</li>
 <li>image</li>
</ul>

图库插件获取来自.pika-thumbs li的样式 - 但是还有默认的博客样式.text ul li也将其效果应用于图库 - 这是我不想要的。有没有办法从图库中排除.text ul li样式？

谢谢！

Answer 1

您可以使用:not，例如：

更改

.text ul li

要 .text ul:not(#pikeme) li

或者

.text ul:not(.pika-thumbs) li

<强> More on :not from MDN

  

否定CSS伪类，不是（X），是一种功能符号   以简单的选择器X为参数。它匹配一个元素   没有参数表示。 X不得包含另一个   否定选择器，或任何伪元素。

Answer 2

<强> Demo

使用ID选择器#pikeme li覆盖.text ul li

  

因为ID选择器的优先级高于类选择器。

CSS

#pikeme li { /* instead of .pika-thumbs li */
    color: red;
}