2

我的 HTML 中有以下内容：

<p class="caption">Lorem Ipsum is a dummy text.It is used to display text in web page.</p>

在我的 CSS 中：

.caption:first-line
{ 
background-color:green;
border-radius:4px;
padding:5px 10px;
}

仅background-color应用于第一行，其余样式被省略。任何人都可以帮忙吗？

4

4 回答 4

6

这是因为选择border-radius器的padding属性不受支持:first-line。

以下引用来自MDN 文档：

只有一小部分 CSS 属性可以在包含使用 ::first-line伪元素的选择器的 CSS 规则集的声明块中使用：

所有与字体相关的属性：font、font-style、font-variant、 font-weight、font-size和.line-heightfont-family

属性，color所有background相关属性：background-color, background-image, background-position, background-repeat, background-size, 和 background-attachment, word-spacing, letter-spacing, text-decoration, text-transform, 和line-height.

于 2013-06-03T08:43:04.023 回答
2

从选择器级别 3, 5.12.1：

:first-line 伪元素类似于内联元素，但有一定的限制。以下属性适用于 :first-line 伪元素：字体属性、颜色属性、背景属性、'word-spacing'、'letter-spacing'、'text-decoration'、'text-transform'和'line -高度'。UA 也可以应用其他属性。

不幸的是，它不是伪元素border-radius支持的属性之一。::first-line

于 2013-06-03T08:44:51.767 回答
0

第一行伪元素不支持边界半径和填充。如果我解释了您正在寻找的内容，这将与您所拥有的内容尽可能接近。我添加了一个 line-height 来制作垂直“填充”，并添加了一个 :before 元素来缩进该行（左填充），但我想不出一种只在第一行右填充的简洁方法。我也不知道你想用边界半径做什么，但我还是把它放在了标​​题上。它目前没有明显的效果。

.caption:first-line
{ 
background-color:green;
line-height: 50px;
}
.caption{
    border-radius:4px;
}
.caption:before{
    content:' ';
    width:10px;
    height: 5px;
    float:left;
}
于 2013-06-03T08:58:20.083 回答
-1

请使用供应商前缀作为边框半径，并将第一行放入单独的标签中，如 span、p 等。

<p class="caption">
     <span>Lorem Ipsum is a dummy text.It is used to display text in web page.</span></p>


.caption span
{ 
     background-color:green;
     -webkit-border-radius: 4px;
     -moz-border-radius : 4px;
     border-radius:4px;
     padding:5px 10px;
}
于 2013-06-03T08:43:17.567 回答