如何将一些样式应用于打印页面上的第一个和最后一个元素？ [英] How to apply some styles to first and last elements on a print page?
问题描述
我有以下虚拟
经过几次测试后，我认为CSS的最佳值如下：
#top {
height：2px ;
头寸：固定;
宽度：100％;
top：0;
左：0;
border-bottom：1px solid＃000;
}
#bottom {
身高：2px;
头寸：固定;
宽度：100％;
左：0;
底部：1px;
border-top：1px solid＃000;
}
p {
padding-top：20px;
}
和您的HTML：
< div id =top>< / div>
< div id =bottom>< / div>
< p> abc< / p>
< p> abc< / p>
.....
I have the following dummy 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>
It's render some
elements and on page preview it looks like the following:
I need to add borders to first and last elements to be like the following:
Is it possible to make by using CSS and to get work in webkit?
EDIT: To everyone who advise the following css
p:nth-child(1){
border-top : solid 1px gray;
}
p:last-child{
border-top : solid 1px gray;
}
or
p:first-child {border-top : solid 1px gray;}
p:last-child {border-bottom : solid 1px gray;}
That dont's work for me because it works accross all pages and looks like this:
I need to work in chrome
You can use two containers and place one at the top of the page and the other one at the bottom. These containers must be placed in position:fixed and they will print in every page. This will work in Firefox, Opera and Internet Explorer but not in webkit browsers.
After a few tests, I think the best values for your CSS are the following:
#top {
height: 2px;
position: fixed;
width: 100%;
top: 0;
left: 0;
border-bottom: 1px solid #000;
}
#bottom {
height: 2px;
position: fixed;
width: 100%;
left: 0;
bottom: 1px;
border-top: 1px solid #000;
}
p {
padding-top: 20px;
}
and your HTML:
<div id="top"></div>
<div id="bottom"></div>
<p>abc</p>
<p>abc</p>
.....
这篇关于如何将一些样式应用于打印页面上的第一个和最后一个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
