Селектор для класса сразу после другого класса

Question

Я хочу создать диапазон, который сразу после пролета с классом «pin», но я понятия не имею, какой селектор может это сделать.

.pin + span не работает для меня (поскольку он, вероятно, не предназначен для обработки классов в конце вызова).

Мой HTML:

<span class="pin"> 
    <i class="fa fa-map-marker"></i> 
</span> 
<span> 
    Some text 
</span> 

Answer 1

Вы также можете использовать новый класс для второго интервала

Answer 2

добавить новый класс, чтобы охватить или использовать встроенные стили

HTML

<span class="pin"> 
    <i class="fa fa-map-marker">Italic Text</i> 
</span> 
<span class='nextPin'> 
    Some text 
</span> 

css

.pin { 
    color: red; 
} 

.nextPin { 
    color: blue;  
} 

работает скрипка here

Answer 3

Вы можете использовать Jquery код, указанный ниже, если вы хотите применить CSS к следующему пролету без назначения нового класса к нему

$(".pin ~ span").css("color", "blue").val("Some text"); 

Приведенных выше кода будет добавить CSS к следующему родственному элементу элемента, имеющего класс = "штырь"

• В идеале вы должны добавить класс в следующий диапазон, а затем применить различные стили CSS для него. Он уменьшает сложность кода и делает код более читабельными и обслуживаемыми.

Answer 4

вы можете дать встроенный стиль как

<span style="color:blue; font-size:80%;"> 
    Some text 
</span> 

или вы можете дать другой класс для второго диапазона, а затем дать стиль к этому классу. Как:

<span class="span2"> 
    Some text 
</span> 

в головной секции

<style> 
.span2{ 
color:red; 
} 
</style> 

Answer 5

Все работает в 3-х способов:
http://jsfiddle.net/1so6er9k/4/
CSS:

div:nth-child(1) > .pin + span { 
    color:red; 
} 
div:nth-child(2) > .pin ~ span { 
    color:red; 
} 

div:nth-child(3) { 
    color: red; 
} 
div:nth-child(3) > .pin{ 
    color: black 
} 

HTML:

<div> 
    <span class="pin"><i class="fa fa-map-marker"></i></span><span>Some text</span> 
</div> 
<div> 
    <span class="pin"><i class="fa fa-map-marker"></i></span><span>Some text</span> 
</div> 
<div> 
    <span class="pin"><i class="fa fa-map-marker"></i></span><span>Some text</span> 
</div> 

Проверено на:
IE 11.0.9600,
FF 38.0.1,
Chrome 43.0.2357.81 на
Widnows 7 x64

Может быть, вы не должны использовать вложенный селектор. Теперь вам не обязательно использовать его. Предположим, вы не используете вложенный селектор. Это предотвращает использование класса снова и делает таблицы стилей больше.