CSS :first-line Î±ÔªËØ

ʵÀý

Ïò¶ÎÂäµÄµÚÒ»¸ö×Ö·ûÌí¼ÓÌØÊâÑùʽ£º

<html>
<head>
<style type="text/css">
p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }
</style>
</head>

<body>
<p>This is a text.</p>
</body>
</html>

Ç××ÔÊÔÒ»ÊÔ

£¨ÔÚÒ³Ãæµ×²¿¿ÉÒÔÕÒµ½¸ü¶àʵÀý£©

ä¯ÀÀÆ÷Ö§³Ö

ËùÓÐÖ÷Á÷ä¯ÀÀÆ÷¶¼Ö§³Ö :first-line Î±ÔªËØ¡£

¶¨ÒåºÍÓ÷¨

:first-line Î±ÔªËØÏòÎı¾µÄÊ×ÐÐÌí¼ÓÌØÊâÑùʽ¡£

Õâ¸öÎ±ÔªËØÓÃÓÚÉèÖÃÔªËØÖеĵÚÒ»ÐÐÎı¾µÄÑùʽ£¬¶ø²»ÂÛ¸ÃÐгöÏÖ¶àÉÙµ¥´Ê¡£

:first-line Ö»ÄÜÓë¿é¼¶ÔªËعØÁª¡£¿ÉÒÔÓ¦Óõ½Ê××ÖĸµÄÊôÐÔÊÇÓÐÏ޵ġ£

×¢ÊÍ£ºÏÂÁÐÊôÐÔÓ¦ÓÃÓÚ :first-line Î±ÔªËØ£º

  • font ÊôÐÔ
  • color ÊôÐÔ
  • background ÊôÐÔ
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Î±ÔªËØ¿ÉÓë CSS Àà½áºÏ£º

p.article:first-line {color: #FF0000}

<p class="article">A paragraph in an article</p>

±¾Àý½«°ÑËùÓÐ class="article" µÄ¶ÎÂäµÄµÚÒ»ÐÐ×Ö·ûÉèÖÃΪºìÉ«¡£

VUE