Question

我的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应用于第一行，并省略其余样式。有人可以帮忙吗？

Answer 1

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

以下引用取自MDN documentation：

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

所有与字体相关的属性：font，font-style，font-variant，   font-weight，font-size，line-height和font-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。

Answer 2

来自Selectors Level 3, 5.12.1：

：第一行伪元素类似于内联级元素，但有一定的限制。以下属性适用于：第一行伪元素：字体属性，颜色属性，背景属性，'字间距'，'字母间距'，'文本装饰'，'文本转换'和'行-高度'。 UA也可以应用其他属性。

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

Answer 3

第一行伪元素不支持border-radius和padding。如果我解释你在寻找什么，这就和我能得到的一样接近。我添加了一个行高来制作垂直“填充”，并且a：在元素之前缩进行（左边填充），但我无法找到一个简洁的方法来做右边的第一行。我也不知道你想用边界半径做什么，但无论如何我把它放在标题上。它目前没有明显的效果。

.caption:first-line
{ 
background-color:green;
line-height: 50px;
}
.caption{
    border-radius:4px;
}
.caption:before{
    content:' ';
    width:10px;
    height: 5px;
    float:left;
}

Answer 4

请使用商家前缀作为边框半径，并将第一行放入单独的标签，如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;
}

Border Radius使用：第一行选择器？

4 个答案: