CSS3选择器,筛选指定的index的元素，兼容IE7+

来源：互联网发布：网络教育高起专专升本编辑：程序博客网时间：2024/06/09 20:13

1.定义和用法:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。<ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li></ul>选取上面结构里面的liul li:nth-child(1){    color:#fff;}/*选取第一个li*/ul li:nth-child(odd){    color:#fff;}/*选取偶数*/ul li:nth-child(even){    color:#fff;}/*选取奇数*/ul li:nth-child(3n+1){    color:#fff;}/*选取3n+1个元素*/

由于IE8不支持这种选择器的写法，所以一下给出兼容性写法ul li:first-child{    color:#fff;}/*选取第一个li*/ul li:first-child+li+li{    color:#fff;}/*选取第三个li*/

HTMLCode：<html><head>    <meta http-equiv="content-type" content="text/html;charset=utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=Edge">    <title>Title</title>    <style type="text/css">        ul li {            border: 1px solid #dfdfdf;            background: red;            list-style: none;            float: left;        }        /*CSS3写法*/        /*ul li:nth-child(1) {                width: 25px;                height: 25px;            }            ul li:nth-child(2) {                width: 50px;                height: 50px;            }            ul li:nth-child(3) {                width: 100px;                height: 100px;            }*/        div:first-child {            height: 100px;        }            div:first-child + div {                height: 100px;            }        /*兼容IE低版本*/        ul li:first-child {            width: 25px;            height: 25px;        }            ul li:first-child + li {                width: 50px;                height: 50px;            }                ul li:first-child + li + li {                    width: 100px;                    height: 100px;                }    </style></head><body>    <div>        <ul>            <li></li>            <li></li>            <li></li>        </ul>    </div>    <br />    <div>        <ul>            <li></li>            <li></li>            <li></li>        </ul>    </div></body></html>

css其他选择器介绍    :nth-of-type() 选择器 ——选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.    n 可以是数字、关键词或公式。与:nth-child(n)不同的是后者与类型无关。（同样不支持IE8）    :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。    提示：等同于 :nth-of-type(1)。（同样不支持IE8）    :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。    提示：等同于 :nth-last-of-type(1)。（同样不支持IE8）    :only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。（同样不支持IE8）    :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。（同样不支持IE8）    提示：请参阅 :nth-last-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数。    :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。n 可以是数字、关键词或公式。（同样不支持IE8）    提示：请参阅 :nth-last-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关，从最后一个子元素开始计数。    :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。（同样不支持IE8）    提示：p:last-child 等同于 p:nth-last-child(1)。    :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。对于 IE8 及更早版本的浏览器中的 :first-child，需要声明 。

0 0