纯css选取指定元素（兼容IE6/7/8）

2021-09-28 15:58:00

今天遇到了选取表格元素进行单独设置的问题，经过各种百度大牛们的方法，总算用纯css实现其效果且兼容IE6/7/8。现将方法总结如下（不只局限于表格，列表等其他标签通用）：

以如下表格为例进行示范：

html代码

<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
<table>

css代码

table{
    text-align: center;
    font-family: "微软雅黑";
    font-size: 14px;
    color: #333;
    background: bisque;
    border-collapse:collapse;
    border-spacing:0;
}
table tr td{
    padding: 10px 10px;
    border: 1px solid #333;
}

浏览器显示如下

第一种方法：nth-child(n)
css3的nth-child(n)选择器：匹配属于其父元素的第N个子元素，不论元素的类型。（IE8及更早版本不支持）

css代码

table tr td:nth-child(1){
    border-left: none;
}
table tr td:nth-child(2){
    color: blue;
}

浏览器显示如下

可以看到第一列的左侧边框消失，第二列的文字变蓝。与css代码显示一致。但是IE8以下没有变化。

第二种方法：first-child和last-child
:first-child选择器用于选取属于其父元素的首个子元素（除IE6外所有主流浏览器均支持，但是对于IE8及更早版本必须声明）。
:last-child选择器用于选取属于其父元素的最后一个子元素(IE8及更早版本不支持）。

css代码

table tr td:first-child{
    color: red;
}

浏览器显示如下

可以看到第一列文字颜色变成了红色。但是IE6没有变化。

table tr td:last-child{
    color: yellow;
}

浏览器显示如下

可以看到最后一列文字颜色变成了黄色。但是IE8及更早版本浏览器没有变化。

第三种方法：first-child+td
使用:first-child+td可以选择首元素后边的元素，若是:first-child+td+td则是选择第三个元素（除IE6外所有主流浏览器均支持，但是对于IE8及更早版本必须声明）。

css代码

table tr td:first-child+td+td{
    color: red;
}

浏览器显示如下

可以看到最后一列的颜色变成了红色。但是IE6没有变化。

第四种方法：
*属性:expression(this.previousSibling==null?' ':' ');或者 *属性:expression(this.nextSibling==null?' ':' ');（兼容IE6）

this.previousSibling可以获取到元素首节点，this.nextSibling可以获取到元素末尾节点。而expression是css表达式，可以理解为在css里书写JS语句，则 *color:expression(this.previousSibling==null?"red":"black");的意思是，首元素的字体颜色是red，而其他元素的字体颜色是black。

css代码

table tr td{
    *color:expression(this.previousSibling==null?"red":"black");
}

IE6显示如下

在IE6里可以看到第一列变成了红色。而在其他浏览器里则没有变化。

css代码

table tr td{     
    *border-right-width:expression(this.nextSibling==null?"0":"1");
}

IE6显示如下

在IE6里可以看到最后一列的border宽度变为0。而在其他浏览器里则没有变化。

（ps：百度上查找资料是说此方法可以兼容IE6和IE7，但是不知道为啥我的IE7里没有反应-_-||）。

总结：

nth-child(n)以及last-child方法在IE8及更低版本浏览器里都不支持。
first-child支持IE7及更高版本的浏览器。first-child+td与之相同。
expression(this.previousSibling==null?' ':' ');或expression(this.nextSibling==null?' ':' ');支持IE6.

综上所述：

可以使用first-child与first-child+td配合使用，再加上expression方法兼容IE6，即可实现大多数浏览器的良好兼容。

码农公寓

相关文章