Home >Web Front-end >HTML Tutorial >CSS adjacency selector_html/css_WEB-ITnose
CSS adjacency selector_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:481230browse
div p{
...
}
Select p
Why is this adjacent word in quotation marks?
<!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> Which p will be in the by-selection?
Only 3 is selected. If it is unexpected, it means that you have not understood the 'adjacency'
Then why is there not 0? It is also an adjacent element of div
It turns out that ' ' this so-called neighbor is just the 'following neighbor'
Adjacent 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 will be selected.. Here 'adjacent' is :'The subsequent neighbor'
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn