html - Visual Composer: css クラスで nth-child が機能しない

Question

私はクライアントの Web サイトに取り組んでおり、彼女は Visual Composer をインストールしています。投稿グリッドの場合、各投稿タイトルに異なる色を割り当てる必要があります。私のアプローチは、 grid-item コンテナを見つけてそれに :nth-child を追加し、それを実際に別の色を適用したいカスタム css クラスに送ることでした。

実際のコードに基づくコード例:

.vc_grid-item:first-child > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: red;
}
.vc_grid-item:nth-child(2) > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: green;
}
.vc_grid-item:nth-child(3) > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: blue;
}

奇妙なことに、この手法は、投稿のアイキャッチ画像にホバー テキスト効果を適用するのにうまく機能しました。

nth-of-type を試してみましたが、うまくいきませんでした。それは機能しますが、最初または 2 番目のタイプのみを解析し、3 つの div すべてに同じ色を適用します。

考えられるすべてのパス順列を試しましたが、どれも機能しません。Visual Composer が生成する無限の div を介してパスを追跡しようとすることは、事実上不可能です。コード インスペクター (Google Chrome) を使用して、動的に生成されたクラス、インライン スタイルとして挿入されたクラス、およびレンダリングされた HTML にあったクラスを見つけましたが、インスペクターには表示されませんでした。これを機能させるために、さまざまな「クラスパス」を慎重にマッピングするのに数時間費やした後、私はまったくのフラストレーションからあきらめました。

興味深いことに、Visual Composer のドキュメントでは、UI を介してカスタム css クラスを追加することにより、カスタム スタイル設定が簡単かつ直接的であることが明確になっています。私の経験では、投稿グリッド内のすべての div に同じ色を適用したい場合は、これは真実です。ただし、各グリッド項目を個別にカスタマイズしてみてください。それはまったく別の球技です...勝つのは不可能かもしれません.

ある種のハッキーな JavaScript の黒魔術に頼らずにこれを機能させる方法についてのアイデアはありますか?