如何成功地在span标记中定位字符串的第二部分具有特异性

Question

我理解最简单的方法是“分类”某些东西，然后给类提供所需的属性，但是，

我不喜欢到处创建课程。这就是特异性和CSS映射的用途。

2.我需要花费数百页的时间来添加这些课程以及一些我甚至不想触及的页面！

所以，至少我有一个父类开始:)但我的问题是，我从来没有必要将span标签内的文本的第二部分除以<br>。

这是HTML

<div class="locations">
<ul>
    <li><strong>Address: </strong><span>47 Feed Mill Lane
        <br>
        Middlebury, VT 05753</span></li>
    <li><strong>Contact: </strong><span>John Doe</span></li>
    <li><strong>Phone: </strong><span>800-639-3191</span>/li>
    <li><strong>E-mail: </strong><span> <a href="mailto:email@email.com">email@email.com</a></span></li>
</ul>

和相关行的CSS。我添加了这种特殊性逻辑，但它将<span>中的整个内容全部放在<br>之后我想要选择.locations > ul > li:first-child > span:nth-child(2) { background-color: #34678a; /*for testing purposes only */ text-indent:25px; } 之后的部分，所以我可以缩进它。

{{1}}

以下是FIDDLE

有点视觉没有伤害;）

Answer 1

CSS无法读取元素的内容，因此无法知道<br>标记的位置。请使用display:inline-block;和vertical-align:text-top;

来定位它

<强> jsFiddle example

您可以使用以下内容：

.locations > ul > li:first-child > span:nth-child(2) {
    background-color: #34678a;
    display:inline-block;
    vertical-align:text-top;
}

Answer 2

您无法使用css定位文本的第二部分（因为它不是一个单独的元素）。但是，您仍然可以使用填充和负边距的组合来缩进文本。

示例1：

.locations li {
    display: block;
    padding-left: 65px;
}
.locations li strong { 
    margin-left: -65px;
}

示例2（所有强标签的宽度相同）：

.locations li { 
    display: block;
    padding-left: 70px;
}
.locations li strong {
    margin-left: -70px;
    width: 70px;
    display:inline-block;
}