今天做一个样式,对表格进行进行分开,中间线进行加粗。
//表格分割线(border-left 必须加 大括号{},双引号"")
$("#dataTab > thead > tr > th:nth-child(5)").css({"border-left":"2.5px solid #dddddd"});
显示如下图
不理解这个地方是怎么实现的。查找了下代码。用的是选择器:nth-child()。
于是查找有关:nth-child()选择器的用法。
:nth-child(n)选择器选取属于其父元素的不限类型的第n个子元素的所有元素。
如 $("p:nth-child(3)")
选取属于其父元素的第三个子元素的每个<p>元素。
简单实现的代码如下(实现父元素下面全部的子元素效果)
http://www.runoob.com/try/try.php?filename=tryjquery_sel_nthchild
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:nth-child(3)").css("background-color","yellow");
});
</script>
</head>
<body>
<div id ="divP" style="border:1px solid;">
<span>div 中的一个 span 元素。</span>
<p>div 中第一个段落。</p>
<p>div 中第二个段落(div 的第三个子元素)。</p>
<p>div 中的最后一个段落。</p>
</div><br>
<div style="border:1px solid;">
<p>另一个 div 中第一个段落。</p>
<p>另一个 div 中第二个段落。</p>
<p>另一个 div 中的最后一个段落(div 的第三个子元素)。</p>
</div>
<p>body 中最后一个段落。</p>
</body>
</html>
效果图
如果是对某个特定区域下的子元素进行操作,可用 > 进行实现,js代码修改为
$("#divP>p:nth-child(3)").css("background-color","yellow");
效果图