Home > Article > Web Front-end > CSS邻接选择器_html/css_WEB-ITnose
CSS邻接选择器_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:481191browse
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会是补选中的呢?
只有 3 是被选中的,如果出乎意料,说明你这个'相邻'没有搞清楚
那么0 为什么没有呢?它也是div的相邻元素
原来 '+' 这个所谓的相邻只是'紧随其后的相邻'
相邻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 会被选中..此处'相邻'为:'其后的相邻'
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
Previous article：使用CSS3各个属性实现小人的动画_html/css_WEB-ITnoseNext article：Html Table 合并单元格_html/css_WEB-ITnose