Question

我有以下假人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>

它会渲染一些

元素，在页面预览中它看起来如下所示： enter image description here

我需要为第一个和最后一个元素添加边框，如下所示： enter image description here

是否可以通过使用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;}

这对我不起作用，因为它适用于所有页面，看起来像这样： enter image description here

我需要使用chrome

Answer 1

如果你对旧浏览器不感兴趣。那么这对你有用......

@media print
  {
      p:nth-child(1){
          border-top : solid 1px gray;
      }
      p:last-child{
          border-bottom : solid 1px gray;
      }
  }

但是如果你想让它与旧的浏览器（特别是IE）一起工作，你将不得不使用一些JS技术。

Answer 2

您可以使用两个容器，将一个放在页面顶部，另一个放在底部。这些容器必须放在position:fixed中，并且每页都会打印出来。这适用于Firefox，Opera和Internet Explorer，但不适用于webkit浏览器。

<强> Demo here

经过几次测试后，我认为CSS的最佳值如下：

#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;
}

和你的HTML：

<div id="top"></div>
<div id="bottom"></div>
<p>abc</p>
<p>abc</p>
.....

Answer 3

更复杂的解决方案是为每个用户计算可查看的页面高度（JavaScript，jQuery等），并检查适合一个页面的项目数量。之后，您可以设置所需元素的样式（nth-child（x））。不是最好的解决方案，但如果你有一个共同的要求（作为某个浏览器，操作系统......），它可能会起作用

修改

可能的解决方案可能是：http://jsfiddle.net/VKDVd/

HTML：只需几个占位符div ...注意你已经设置了你的doctype（否则$（window）.height（）将无法正常工作！）

的JavaScript / jQuery的：

$(document).ready(function () { // when including images in your side you should use $(window).load(function() {[...]} to make sure they are completely loaded before the script calculates the heights var pageHeight = $(window).height(); // JS-only and IE-compatible solution see my answer var sumElementHeights = 0; var count = -3; // ensures that the black border is inside the viewport for (var i = 0; i < $('div').length && sumElementHeights < pageHeight; i++, count++) { sumElementHeights += $('div').eq(count).height(); // sums up the div heights } $('div').eq(0).css('border-top', '10px solid black'); $('div').eq(count).css('border-bottom', '10px solid black'); // you could add a loop here for each page individually... });

PS：如果视口大小发生变化（例如，如果用户调整浏览器窗口大小），您还可以添加更新代码以更新div边框。

PPS：您还可以使用 count 的数字 - 因为它肯定取决于您添加到元素的边界。

Answer 4

尝试first-child和last-child。

对于实例，

p {font-size: 20px;}
p:first-child {...} /* Add your desired style here */
p:last-child {...} /* Add your desired style here */

如何将一些样式应用于打印页面上的第一个和最后一个元素？

4 个答案: