简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

CSS邻接选择器_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:40:48
原创
1191 人浏览过

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 会被选中..此处'相邻'为:'其后的相邻'



相关标签：
CSS邻接选择器
来源：php.cn
上一篇：使用CSS3各个属性实现小人的动画_html/css_WEB-ITnose 下一篇：Html Table 合并单元格_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
WordPress 6.0 (add_editor_style) 不会在古腾堡编辑器中加载 style.css 我正在学习UdemyWordPress课程来创建自定义WordPress块主题。我成功在function.php中注册了块类型，并且可以在古腾堡编辑器中选择我的块。教程建议使用以下...
来自于 2023-11-12 20:37:50
0
2
261
解码 CSS 选择器的优先级/特异性 我想了解CSS选择器如何处理属性冲突。如何选择一个属性而不是另一个属性？div{background-color:red;}div.my_class{background-colo...
来自于 2023-10-19 22:58:19
0
2
175
是否有一个选择器用于选择前面的同级元素？ 加号选择器（+）用于选择下一个相邻的兄弟。上一个兄弟姐妹有等效的吗？
来自于 2023-10-09 22:04:19
0
2
298
学习如何在CSS伪类函数中有效地运用复合选择器:host-context(<选择器>) 在MDN文档中，:host-context()被定义为：:host-context()CSS伪类函数选择包含它所在的CSS的影子DOM的影子主机（因此您可以从其影子DOM中选择自定...
来自于 2023-09-16 15:49:33
0
1
621
CSS 颜色变量 - 定义 CSS 颜色时需要规则或选择器 您好，我遇到以下问题：“定义CSS颜色时需要at-rule或选择器。”我正在使用VS代码，并且我已在https://jigsaw.w3.org/css-validator/vali...
来自于 2023-09-13 11:02:07
0
1
259
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！