Html 一个类的选择器位于另一个类之后

我想用一个类“pin”来设计一个跨度之后的跨度，但我不知道哪一个选择器可以做到这一点

.pin+span对我不起作用（因为它可能不是为在调用结束时处理类而设计的）

我的HTML：

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

一些文本

您还可以为第二个span使用新类

添加新类以span或使用内联样式

HTML

---

working fiddle

如果您想将css应用到下一个跨度，而不给它分配新的类，那么可以使用下面给出的Jquery代码

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

上面的代码将CSS添加到具有class=“pin”的元素的下一个同级元素中

• 理想情况下，您应该将类添加到下一个跨度中，然后为其应用各种css样式。这样可以降低代码复杂性，并使代码更易于阅读和维护

---

您可以像

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

一些文本

或者，您可以为第二个跨度指定不同的类，然后为该类指定样式。比如：

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

一些文本

头部

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

.span2{
颜色：红色；
}

一切都以三种方式工作：

CSS:

HTML:

一些文本
一些文本
一些文本

测试日期：
IE 11.0.9600，
FF 38.0.1，
铬43.0.2357.81在
Widnows 7 x64

---

也许您不应该使用嵌套选择器。现在您不一定需要使用它。考虑不要使用嵌套选择器。这将防止再次使用该类，并使样式表更大。

创建一个小提琴演示？像这样？添加一个新类以跨越或内联使用styles@Akshay，即使是原来的也能工作。您确定

.pin+span

不能工作吗？它当然与您提供的标记一起工作。即使第二个元素有一个类，它也应该有效。请在下次它作为删除建议出现时给出一个例子，这就是为什么我说的something@SethMcClaine感谢您将其从删除中保存

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

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

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
}

<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>