> 웹 프론트엔드 > HTML 튜토리얼 > css学习选择器之:nth-child(n)_html/css_WEB-ITnose

css学习选择器之:nth-child(n)_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:38:07
원래의
1293명이 탐색했습니다.

今天新学习了一个小效果,网站比如说实现间行颜色变化,比如说一行黑,一行白,好吧,斑马就出现了,当你鼠标触碰某一行,颜色背景变化,尤其是当你连接数据库时,简单的代码就显得很重要了.

这时候一个有意思的朋友出现了,:nth-child(n)  一直在那蹦?着说“找我呀”,这个是说选择器匹配属于其父元素的第N个子元素,从0开始,比如说p:nth-child(2)指下标为2的p元素,就是第3个元素;然后如果想实现奇偶行不同,奇数可以直接用odd,偶数直接用even,方便,如果用(2n+1),(2n)也OK的;

.history-content:nth-child(2n+1) {	background: #D8F0E7;}.history-content:nth-child(2n) {	background: #eee;}.history-content:hover {	background: #fff;}
로그인 후 복사

跟下面效果是一样一样的:

.history-content:nth-child(odd) {	background: #D8F0E7;}.history-content:nth-child(even) {	background: #eee;}.history-content:hover {	background: #fff;}
로그인 후 복사
最后效果是这样的,一行灰色,一行绿色,触碰成白色


菜鸟学习,如有更好的,敬请交流!哈

版权声明:本文为博主原创文章,未经博主允许不得转载。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿