如何用css控制表格某列

html-css011

如何用css控制表格某列,第1张

如果不考虑兼容,css3新增了一些计算位置的选择器:

:first-of-type    选择属于其父元素的首个 <p>元素的每个 <p>元素

:last-of-type   选择属于其父元素的最后 <p>元素的每个 <p>元素。

:only-of-type   选择属于其父元素唯一的 <p>元素的每个 <p>元素。

:only-child    选择属于其父元素的唯一子元素的每个 <p>元素。

:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p>元素。

:nth-last-child(n)    同上,从最后一个子元素开始计数。

:nth-of-type(n)    选择属于其父元素第二个 <p>元素的每个 <p>元素。

:nth-last-of-type(n)    同上,但是从最后一个子元素开始计数。

举个例子,要把表格第三行第三列的字体改成红色:

table tr:nth-child(3)>td:nth-child(3) {

   color: red

}

这个用纯css是无法实现的,必须结合js,最好是jq,实现方法比较简单:

$("td:contains('已付款')").css("color","blue")

$("td:contains('待付款')").css("color","red")

$("td:contains('未选定')").css("color","black")

$("td:contains('无')").css("color","gray")