我有以下虚拟 code :
<!doctype html>
<html>
<head>
<style>
p {font-size: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var body = document.getElementsByTagName('body')[0],
p = document.createElement('p'),
el;
p.style.height = '20px';
p.innerText = 'Some Test';
for (var i = 0, len=30; i<len; i++) {
el = p.cloneNode(true);
body.appendChild(el);
}
};
</script>
</body>
</html>
它渲染了一些
元素，在页面预览中它看起来像下面这样:
我需要为第一个和最后一个元素添加边框，如下所示:
是否可以使用 CSS 制作并在 webkit 中工作？
编辑:致建议以下 CSS 的所有人
p:nth-child(1){
border-top : solid 1px gray;
}
p:last-child{
border-top : solid 1px gray;
}
或
p:first-child {border-top : solid 1px gray;}
p:last-child {border-bottom : solid 1px gray;}
这对我不起作用，因为它适用于所有页面并且看起来像这样:
我需要在 chrome 中工作
最佳答案
如果您不在乎旧浏览器。那么这对你有用......
@media print
{
p:nth-child(1){
border-top : solid 1px gray;
}
p:last-child{
border-bottom : solid 1px gray;
}
}
但是如果你想让它在旧的浏览器(尤其是 IE)上工作，你将不得不使用一些 JS 技术。
关于javascript - 如何将某些样式应用于打印页面上的第一个和最后一个元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17526142/