ホームページ > 記事 > ウェブフロントエンド > CSS 隣接関係 selector_html/css_WEB-ITnose
CSS 隣接関係 selector_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:481219ブラウズ
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 までご連絡ください。