css中的大于号是什么意思 有何作用

html-css017

css中的大于号是什么意思 有何作用,第1张

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}

观察显示效果

做前端一定要记住:nth-child(2)这个选择器,它可以帮你轻松选择你想要的标签并给与修改添加样式

下面通过几个例子说明,相信你一看就明白

:nth-child(2)表示选取第几个标签,”2可以是你想要的数字”

:nth-child(n+4)选取大于等于4标签,”n”表示从整数

:nth-child(-n+4)选取小于等于4标签

:nth-child(2n)选取偶数标签,2n也可以是even

:nth-child(2n-1)选取奇数标签,2n-1可以是odd

:nth-child(3n+1)自定义选取标签,3n+1表示”隔二取一”

:last-child选取最后一个标签

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个