ホームページ > 記事 > ウェブフロントエンド > CSS 隣接関係 selector_html/css_WEB-ITnose
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になります..ここでの「隣接」とは、「その後の隣接」です