如何使用css选择父类的第一个同级类？

我已经尝试了各种可能的方法和众多的选择器，但我似乎找不到一种方法来选择我的网站上的类。我在这里用JS fiddle解决了这个问题，它是有效的：

在我的网站上，我只想展示由插件生成的前两个评论。这是css插件的结构：

<div class='wp-google-reviews'>
   <div class='wp-google-review'></div>
   <div class='wp-google-review'></div>
   <div class='wp-google-review'></div>
   <div class='wp-google-review'></div>
</div>

然而，这在我的网站上似乎不起作用，但在小提琴上起作用。我用过！同样重要的是，当不使用第n个选定项时，我可以更改div的背景

---

有人知道是什么阻碍了我在这里使用第n个类型选择器吗？

试着去掉

：

和

第n个类型之间的空格

在您的web中有另一个

背景色

属性

！重要信息

因此它会覆盖您的属性：

.wpac, .wpac h1, .wpac h2, .wpac h3, .wpac h4, .wpac h5, .wpac h6, .wpac p, .wpac td, .wpac dl, .wpac tr, .wpac dt, .wpac ol, .wpac form, .wpac select, .wpac option, .wpac pre, **.wpac div**, .wpac table, .wpac th, .wpac tbody, .wpac tfoot, .wpac caption, .wpac thead, .wpac ul, .wpac li, .wpac address, .wpac blockquote, .wpac dd, .wpac fieldset, .wpac li, .wpac strong, .wpac legend, .wpac em, .wpac s, .wpac cite, .wpac span, .wpac input, .wpac sup, .wpac label, .wpac dfn, .wpac object, .wpac big, .wpac q, .wpac font, .wpac samp, .wpac acronym, .wpac small, .wpac img, .wpac strike, .wpac code, .wpac sub, .wpac ins, .wpac textarea, .wpac var, .wpac a, .wpac abbr, .wpac applet, .wpac del, .wpac kbd, .wpac tt, .wpac b, .wpac i, .wpac hr {
    background-color: transparent!important;
}

添加

！重要信息

到您的属性，它应该可以正常工作，因为在该属性之后加载css表：

.wp-google-reviews .wp-google-review: nth-of-type(2) {
         background-color: red !Important;
    }

---

CSS中有一个介于：和n之间的空格。去掉它，它就会工作

.wp google reviews.wp google review:n类型（2）{
背景色：红色；
}

A.
B
C
D

试试这个：

.wp谷歌评论分区：第n个孩子（2）{背景颜色：红色； }

---

上面的代码选择了wp google reviews类的第二个div

在您的示例中，类型（2）的第n个div之前的空格是否也存在于您的网站中？我添加了

！重要信息

到您网站上的规则，它运行良好。在我看来，您的CSS正在被google review CSS覆盖。代码中没有空格，我使用了！很重要，但仍然不起作用。另外，背景只是一个例子。实际上，我同时使用display:none和background:red来检查它是否工作，但它不显示。此外，即使它被覆盖，谷歌编辑器不应该告诉我有一个样式被谷歌默认样式覆盖吗？因为我看不到那种风格出现。。。。非常奇怪，谢谢！似乎是最棒的！重要财产。它正在工作。

.wp-google-reviews .wp-google-review: nth-of-type(2) {
         background-color: red !Important;
    }