2.3.3 相邻同胞选择器
优质
小牛编辑
123浏览
2023-12-01
相邻同胞选择器(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 所示: