Question

我已经尝试了许多选择器的一切可能方式，但我似乎找不到在我的网站上选择课程的方法。我在这里用JS小提琴解决了这个问题并且它有效：https://jsfiddle.net/ppyjo1bk/

在我的网站http://wellfixreparaties.nl上，我只想展示由插件生成的前两个评论。这是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>

我像这样定位第二个元素类：

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

然而，这似乎不适用于我的网站，但它确实在小提琴上。我也使用过！重要的是当我没有使用第n个选中时我能够改变div的背景。

任何人都知道在这里使用nth-of-type选择器阻碍了我什么？

Answer 1

您网络中的另一个background-color媒体资源!Important，因此它会覆盖您的媒体资源：

.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;
}

将!important添加到您的媒体资源，它应该可以正常工作，因为你的css表加载后：

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

Answer 2

尝试删除:和nth-of-type

之间的空格

Answer 3

你的CSS之间有一个空格：和第n个。删除它，它会工作。

＆＃13;

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

＆＃13;

<div class='wp-google-reviews'>
   <div class='wp-google-review'>A</div>
   <div class='wp-google-review'>B</div>
   <div class='wp-google-review'>C</div>
   <div class='wp-google-review'>D</div>
</div>

＆＃13;

Answer 4

试试这个：

.wp-google-reviews div：nth-child（2）{background-color：red; }

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

如何用css选择父类的第一个兄弟类？

4 个答案: