css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type
2017-04-27 10:59
1276 查看
first-child、last-child、nth-child、nth-last-child、nth-of-type
1.first-child(IE7兼容)、last-child(IE8不兼容)
html:
<body> <h2>列表</h2> <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> </ul> </body>
css:
<style> ul {list-style: none;} li:first-child {/*给第一个列表项目设置样式 兼容IE7*/ background-color: pink; } li:last-child { /*给最后一个列表项目设置样式 IE8不兼容*/ background-color: red; } </style>
解析:
一个页面中无论有几个ul列表,只要设置
first-child、last-child,那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。
2.nth-child、nth-last-child (IE8不兼容)
html:
<body> <h2>列表</h2> <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> <li>列表项目5</li> <li>列表项目6</li> </ul> </body>
css:
<style> ul {list-style: none;} li:nth-child(3) { /*表示li元素中,第三个元素 IE8不兼容*/ background-color: pink; } li:nth-last-child(2) { /*表示li元素中,倒数第二个元素 IE8不兼容*/ background-color: red; } </style>
3.对奇数、偶数使用样式
html:
<ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> <li>列表项目5</li> <li>列表项目6</li> </ul>
css:
<style> ul {list-style: none;} li:nth-child(odd) {/*表示li元素中,从1开始 奇数为pink*/ background-color: pink; } li:nth-child(even) {/*表示li元素中,从1开始 偶数为灰色*/ background-color: #ccc; } </style>
解析: li:nth-child(odd)含义:li的父元素ul的儿子中,从1开始数,奇数儿子设置样式为xxx;
当父元素为列表时,因为只有列表项目一种子元素,不会出现问题;当父元素是div时,就不止一种子元素,会引起问题。如下:
例如:设置div元素中为奇数标题h2背景颜色
html: <div> <h2>文章标题A</h2> <p>我是一个小段落。。。</p> <h2>文章标题B</h2> <p>我是一个小段落。。。</p> <h2>文章标题C</h2> <p>我是一个小段落。。。</p> <h2>文章标题D</h2> <p>我是一个小段落。。。</p> </div> css: h2:nth-child(odd) { background-color: pink; }
执行结果为:
解析: h2:nth-child(odd)含义是:h2的父元素div 的所有儿子中 为奇数的儿子 设置背景颜色;而不是所有h2中为偶数的h2设置样式;
解决方法:
nth-of-type可以避免则会中问题产生
4.nth-of-type(IE8不兼容):只针对同类型的元素进行计算
css:
h2:nth-of-type(odd) { /*所有h2标签中为奇数的设置样式*/ background-color: pink; } h2:nth-of-type(even) { /*所有h2标签中为偶数的设置样式*/ background-color: #ccc; }
解析: h2:nth-of-type(odd)含义:在所有h2标签中,只要是奇数h2就设置样式;只针对h2标签,与父元素无关;
循环使用样式 li:nth-child(4n+1)
html:
<ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> <li>列表项目5</li> <li>列表项目6</li> <li>列表项目7</li> <li>列表项目8</li> <li>列表项目9</li> <li>列表项目10</li> <li>列表项目11</li> <li>列表项目12</li> </ul>
css:
<style> ul {list-style: none;} li:nth-child(4n+1) { /*表示li元素中,4个li为一组循环 第一个li设置为*/ background-color: red; } li:nth-child(4n+2) { /*表示li元素中,4个li为一组循环 第二个li设置为*/ background-color: pink; } li:nth-child(4n+3) { background-color: #ccc; } li:nth-child(4n+4) { background-color: yellow; } </style>
解析:
4n含义:四个li元素为一组循环;
4n+1含义:这一组循环中,第一个样式;
4n+2含义:这一组循环中,第二个样式;
4n+3含义:这一组循环中,第三个样式;
4n+4含义:这一组循环中,第四个样式;
相关文章推荐
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- CSS3选择器:nth-child和:nth-of-type之间的差异
- CSS3选择器:nth-child和:nth-of-type之间的差异
- css3中nth-child选择器和nth-of-type选择器的区别
- CSS3的nth-child() 和nth-of-type()选择器,表格奇偶行变色
- 【CSS3】---first-of-type选择器+nth-of-type(n)选择器
- CSS3选择器:nth-child和:nth-of-type之间的差异(转)
- 【CSS3】---first-of-type选择器+nth-of-type(n)选择器
- 【CSS3】---last-of-type选择器+nth-last-of-type(n)选择器
- CSS3选择器:nth-child和:nth-of-type之间的差异
- 【CSS3】---last-of-type选择器+nth-last-of-type(n)选择器
- nth-child,nth-of-type,first-of-type,last-of-type,nth-last-of-type,only-of-type等的区别
- 【CSS3】---first-of-type选择器+nth-of-type(n)选择器
- 【CSS3】---last-of-type选择器+nth-last-of-type(n)选择器
- 【CSS3】---last-of-type选择器+nth-last-of-type(n)选择器
- CSS3选择器:nth-child和:nth-of-type之间的差异
- 【CSS3】---first-of-type选择器+nth-of-type(n)选择器
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)