如何用css選擇父類的第一個兄弟類？

我已經儘可能多的選擇器，但我似乎無法找到一種方法來選擇我的網站上的類。我已經在JS小提琴中解決了這個問題，它的工作原理如下：https://jsfiddle.net/ppyjo1bk/如何用css選擇父類的第一個兄弟類？

在我的網站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的背景。

任何人有一個想法是什麼阻止我從這裏使用第n種類型的選擇器？

來源

2017-07-27 Jan Klaas

第二格是空格之前在你的榜樣第n-的式（2）在這裏也存在於你的網站？ – BoltClock

我在你網站的規則中添加了'！important'，它工作的很好。 – sol

在我看來，你的CSS正在被谷歌評論CSS覆蓋。 –

儘量擺脫:和nth-of-type

來源

2017-07-27 10:35:15 83N

之間的空間還有另一個background-color財產在你的網頁與!Important所以它overwritting你的財產：

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

來源

2017-07-27 10:36:09

謝謝！似乎是！重要的財產。它現在正在工作。 –

你的CSS中有：和nth之間的空格。刪除它，它會工作。

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

<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>

來源

2017-07-27 10:39:25 Gerard

試試這個：

.wp - 谷歌 - 評論DIV：第n個孩子（2）{背景色：紅色; }

上面的代碼中選擇的類WP-谷歌的審閱

來源

2017-07-27 10:44:03

如何用css選擇父類的第一個兄弟類？

回答

相關問題