css选择器符号（~，+，>）

html-css027

css选择器符号（~，+，>）,第1张

1.~波浪号

A~B 选择A标签后的所有B标签，【A和B必须是相同的父元素】

2.+（兄弟选择器）

A+B 选择紧邻在A后面的B元素，【A和B必须拥相同的父元素】所选的仅为一个B元素标签

3.>大于号

A>B 选择A元素里面的B元素【B元素是A元素下的第一代，只第一后代】

css中 >表示子元素选择器（Child selectors）。与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，而不管孙辈、玄孙辈的元素。

示例如下：

创建Html元素

<div class='test'>

<div>

我是长子

<div>我是长孙</div>

</div>

<div>我是次子</div>

<span>子代元素设置了边框样式，而孙代不受影响。</span> 

</div

设置css样式

div{padding:10pxmargin:5px 0border:1px solid green}

div.test{width:200pxheight:200px}

div.test > div{border:3px solid #ebecbe}

span{color:#999font-style:italic}

观察显示效果