CSS控制只打印某个标签内的内容

在做页面时，希望点击"打印"按钮，只把printonly中的内容打印出来，代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
    @media print {

      .noprint,
      input {
        display: none;
      }

      .printonly {
        display: block;
      }
    }
  </style>
</head>

<body>
  <div class="noprint">
    这里是不需要打印的内容
  </div>
  <div class="printonly">
    这里写要打印的内容
  </div>
  <input onClick="print()" value="点击打印" type="button">
</body>

</html>

@media print里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式。
隐藏不需要使用display：none；
尽量不要让内容浮动，有些浏览器打印浮动的元素时，会截去浮动元素中的内容。