6

次のダミーコードがあります：

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

それはすべてのページで機能し、次のように見えるため、私にとってはうまくいきません。ここに画像の説明を入力

クロムで作業する必要があります

4

4 に答える 4

0

古いブラウザを気にしないのであれば。次に、これはあなたのために働くでしょう...

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

ただし、これを古いブラウザ (特に IE) で動作させたい場合は、何らかの JS テクニックを使用する必要があります。

于 2013-07-08T12:09:59.550 に答える
-1

と を試してfirst-childくださいlast-child。

例えば、

p {font-size: 20px;}
p:first-child {...} /* Add your desired style here */
p:last-child {...} /* Add your desired style here */
于 2013-07-08T12:06:18.330 に答える