: CSS セレクター問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

在为一个网站写一个通用的CSS，对不同的网页做不同的布局修改。但是网站的HTML不可修改。遇到一个选择器的问题，请教一下各位。

网页中有个类叫做 class1, 这是唯一能识别网页的东西，只出现一次。他的子元素的子元素...（四级）之后有多个并列的元素（有网页内唯一的ID, p0c1,p0c2,...）需要分别做不同的修改。

information

name *

Test code *

問題のある 2 つの方法を試しました:
1. ID を直接使用します。ただし、これは Web サイトの他のページ (類似した構造、重複した ID) と競合します
2. class1 :nth-child(1) :nth-child(3) :nth-child(1) :nth-child(1) を使用します。）。ただし、セレクターが nth-child を使用すると、n 番目の子要素が選択されるだけでなく、n 番目の子要素の子要素も選択されるため、競合が発生します。

以下のような方法はあるので教えてください:
1.class1の子孫要素の中からID番号で選択する？
2. nth-child を正しく使用して、他の子孫を関与させずに n 番目の要素のみを選択するにはどうすればよいですか?

他の方法がある場合は、お知らせください、ありがとうございます!

ディスカッションへの返信 (解決策)

$('.class1 div div div #p0c1')

2 番目の質問:
これは、コードから構造をコピーすると機能します。あなたが与えた構造に何か問題があるため、それはあなたのものとはわずかに異なります（:nth-child(1) :nth-child(3) :nth-child(1) :nth-child(1))。それは大きなことではありません。問題

$( '.class1 div:nth-child(1) div:nth-child(1) div:nth-child(2) #p0c1')

この方法を試してみました
nth-child(1)

結果は次のように要約できます。
この nth-child(n) は、親要素を持つすべての子要素に対して機能します。もちろん、 .class1 div:nth-child(1) div:nth-child(1) div の場合。 :nth-child は前に使用されます (2) 後で別のフィルターを追加したい: nth-child(1) は、結果の文字列 (実際にはすべての子孫を含む) 内の子要素のすべてのレベルが、次の条件を満たす限り、返される結果になることを意味します。これらは一致します

例:
div:nth-child(2)
これをセレクターとして直接使用すると、次の点を満たす HTML 全体のすべての要素が結果になります
1. これには親要素があります
2. この子要素は 2 番目にランクされています。私には兄弟がいます
3. この要素は div です