当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to successfully target the second part of a string in a span tag with specificity

问题描述:

I understand the easiest way is to "class" something and then give the class the properties needed, however,



1. I'm not a big fan of creating classes everywhere. That's what specificity and CSS mapping is for.

2. It would take me forever to go through hundreds of pages to add these classes and some of the pages I'm not even supposed to even touch AT ALL!

So, at least I have a parent class to start with :) But my problem is, I have never had to target the second part of a text inside span tags divided by a <br> .

Here is the 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 protected]">[email protected]</a></span></li>

</ul>

and the CSS for the line in question. I added this specificity logic, but it is taking the entire content inside the <span> I want to select the portion after the <br> so I can indent it.

.locations > ul > li:first-child > span:nth-child(2) {

background-color: #34678a; /*for testing purposes only */

text-indent:25px;

}

Here is the FIDDLE

And a little visual doesn't hurt ;)

网友答案:

CSS can't read the content of your elements and therefore has no idea where the <br> tag is. Target it instead with display:inline-block; and vertical-align:text-top;

jsFiddle example

You can use the following:

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

You can't target the second part of the text using css (as it's not a separate element). However you can still indent the text by using a combination of padding and negative margins.

Example 1:

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

Example 2 (all strong tags same width):

.locations li { 
    display: block;
    padding-left: 70px;
}
.locations li strong {
    margin-left: -70px;
    width: 70px;
    display:inline-block;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: