• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • ::first-line

    版本:CSS3

    CSS伪元素::first-line在某块级元素的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。和其他所有的伪元素一样,::first-line不能匹配任何真实存在的html元素。::first-line伪元素只能在块容器中,所以::first-line伪元素只能在一个display值为block,inline-block,table-cell或者table-caption中有用。在其他的类型中,::first-line是不起作用的.

    语法:

    E::first-line{sRules}
    • ::first-line选择器用来指定选择器第一行的样式,它生成包含元素的第一个格式化行的伪元素。
    • ::first-line样式表示元素中的第一行文本,无论该行中可能出现多少个词。
    • ::first-line只能附加到块级元素。内联对象要使用该伪对象,必须先将其设置为块级对象。可以应用到首字母的属性是有限的。
    • ::first-line是CSS3新版的写法,以前版本的写法是:first-line。新版是双冒号::,旧版是单个冒号::

    允许的属性值

    在一个使用了::first-line伪元素的选择器中,只有很小的一部分css属性能被使用:

    在CSS 2中,伪元素是以:开头的。由于伪类也遵循同一规则,使得他们之间难以区分。为了解决这个问题,在CSS 2.1中,伪元素支持以::开头。现在,使用伪元素时更推荐以::开头,而使用伪类时使用:开头。

    因为过去的浏览器都实现过CSS 2的规则,所以现在那些支持::的浏览器通常同时也支持:的形式。

    如果需要支持老旧的浏览器,那么:first-line是唯一的选择,反之,更推荐使用::first-line

    浏览器支持

    IE9+以及新版浏览器都支持::first-line

    例子

    将每个段落中的第一行字母转换成大写

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore.</p>
    
    <style>
    .demo1 p::first-line { text-transform: uppercase }
    </style>
    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore.

    margin-left 在 first-line 伪元素上无效

    <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore.</p>
    </div>
    <style>
    .demo2 div { background:#ccc; }
    .demo2 p::first-line { margin-left: 20px; }
    </style>
    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore.

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			p:first-line{
    				font-size:2em;
    				color:#8a2be2;
    				background-color:#afd9ee;
    			}
    		</style>
    	</head>
    	<body>
    	<div>
    		<h1>hello world!</h1>
    		<p>第一行文本</p>
    		<p>第二行文本</p>
    	</div>
    	</body>
    </html>

    hello world!

    第一行文本

    第二行文本

    上篇:::first-letter

    下篇:::cue