揭秘CSS(第 1 版)
2.3.3 相邻同胞选择器
阅读(

概述

CSS选择器

概述

基本选择器

关系选择器

子代选择器

后代选择器

相邻同胞选择器

相邻同胞选择器(E + F),选择紧跟在某个元素的后面,且具有相同父亲的元素。换句话说,E和F是同辈元素,F紧跟在E元素后面,即它们之间没有其他同胞元素。相邻同胞选择器中,+ 两侧的空白符是可选的。

如,一些博客站,博文标题后面的第一段是博文的摘要。HTML代码如下:

<article>
     <h1>相邻同胞选择器</h1>
     <p>相邻同胞选择器,为同一个父元素下某个元素之后的第一个兄弟…</p>
     <p>例如,一些博客站,博文标题后面的第一段是博文的摘要。如果希望摘要…</p>
</article>

上述代码中,第一个 p 元素是 h1 元素相邻同胞元素。为了突显摘要,就可以使用相邻同胞选择器为摘要应用特殊样式,如让摘要显示为绿色、楷体,并且有1px的灰色虚线框:

h1 + p {
    color: green;
    font-family: KaiTi_GB2312;
    border: 1px dashed #333;
}

运行结果如图 2‑5 所示:

CSS相邻同胞选择器
图2-5 CSS相邻同胞选择器

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验