Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

CSS邻接选择器_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:48

Original

1189 people have browsed it

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>

Copy after login

哪些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>

Copy after login

3 ,4 会被选中..此处'相邻'为:'其后的相邻'

Related labels：

CSS邻接选择器

source：php.cn

Previous article：使用CSS3各个属性实现小人的动画_html/css_WEB-ITnose Next article：Html Table 合并单元格_html/css_WEB-ITnose

Statement of this Website

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