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}
观察显示效果
~(波浪号):A ~ B表示选择A标签后的所有B标签,但是A和B标签必须有相同的父元素。
h3~h5选择前面有<h3>元素的每个<h5>元素,即选择h3之后出现的所有h5,两种元素必须拥有相同的 父元素 ,但h5不必紧随h3。
说明:这里的h5,h3也可以换成实际项目中的其他标签的类名、标签名或id等。
~(加号)加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素,且A和B必须拥有相同的父元素,所选到的仅为一个B元素标签。
大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素,其中B元素是A元素的第一代。
.myDiv>h3选择类名名为myDiv里面的第一代h3。