css操作符

余生颓废 提交于 2020-02-28 02:25:40

p~ul{
   background:#8e8e8e;
}
<p>段落P</p>
<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ul>
p~ul选择前面有<p>元素的每个<ul>元素,即选择p之后出现的所有ul,两种元素必须拥有相同的父元素,但ul不必紧随p。

css中“>”是css3中特有的选择器,A>B表示选择A元素的所有子B元素,与A B不同的是,A B选择所有后代元素,为A>B只选择一代。

A B{}选择A所有的后代B元素

A>B{}选择A的一代B元素

A+B{}这个+是选择相邻兄弟,称作“相邻兄弟选择器”,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

  h1 + p {margin-top:50px;}
 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!