CSS中的大于号表示什么意思

html-css018

CSS中的大于号表示什么意思,第1张

你说的这个是关系选择符

语法:

E>F { sRules }

说明:

选择所有作为E元素的子元素F。

与包含选择符不同的是,子选择符只能命中子元素,而不能命中孙辈。

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}

观察显示效果

<span style="font-size:24px">.gl{//大于号样式

width: 12px

height: 12px

position: absolute

border-left: 1px solid #999

border-bottom: 1px solid #999

-webkit-transform: translate(0,-50%) rotate(-135deg)

transform: translate(0,-50%) rotate(-135deg)

}</span>