ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 隣接関係 selector_html/css_WEB-ITnose

CSS 隣接関係 selector_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:40:481232ブラウズ

div + p{

...

}

div に「隣接」している p を選択してください


なぜこれが引用符で囲まれているのですか?

<!DOCTYPE html><html><head><style>div + p {    background-color: yellow;}</style></head><body><p>Paragraph 0. Not in a div.</p><div><p>Paragraph 1 in the div.</p><p>Paragraph 2 in the div.</p></div><p>Paragraph 3. Not in a div.</p><p>Paragraph 4. Not in a div.</p></body></html>

どの p が by- になりますか?選択されていますか?


3 だけが選択されている場合、それは「隣接性」を理解していないことを意味します


では、なぜ 0 ではないのでしょうか?

いわゆる「+」隣接は単に「次の隣接」であることがわかります


隣接2


div ~ p{

...

}

<!DOCTYPE html><html><head><style>div ~ p {    background-color: yellow;}</style></head><body><p>Paragraph 0. Not in a div.</p><div><p>Paragraph 1 in the div.</p><p>Paragraph 2 in the div.</p></div><p>Paragraph 3. Not in a div.</p><p>Paragraph 4. Not in a div.</p></body></html>

3,4はSelectになります..ここでの「隣接」とは、「その後の隣接」です


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。