How to apply some styles to first and last elements on a print page?

问题

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

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

回答1:

If you do not give a damn about old browsers. Then this will work for you...

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

But if you want this to work with older browsers(especially IE) you'll have to use some JS technique.

回答2:

A more complicated solution would be to calculate the viewable page height (JavaScript, jQuery or the like) for each user and check how many items fit onto one page. Afterwards you can style the desired elements (nth-child(x)). Not the best solution but might work if you have conrete requirements (as a certain browser, OS, ...)

EDIT:

A possible solution could be: http://jsfiddle.net/VKDVd/

HTML: Just a few place-holder divs... Pay attention that you have set your doctype (otherwise $(window).height() will not work properly!)

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: You could also add further code that updates the div borders if the viewport size changes (e.g. if the user resizes the browser window).

PPS: You can also play around with the numbers for count - as it certainly depends on the borders you add to the elements.

回答3:

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.

Demo here

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>
.....

回答4:

Try first-child and last-child.

For Instance,

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

来源：https://stackoverflow.com/questions/17526142/how-to-apply-some-styles-to-first-and-last-elements-on-a-print-page

标签

javascript

css

printing

page-break-inside