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

一切都以三种方式运作：
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

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

Answer 4

如果要将css应用于下一个跨度而不为其分配新类，则可以使用下面给出的Jquery代码

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

上面的代码会将CSS添加到具有class =＆＃34; pin＆＃34;

的元素的下一个兄弟元素

理想情况下，您应该将类添加到下一个范围，然后为其应用各种CSS样式。它会降低代码复杂性并使代码更易读和可维护。

Answer 5

你可以提供像

这样的内联样式

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

或者您可以为第二个范围提供不同的类，然后为该类提供样式。像：

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

在头部

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

Answer 6

这其实是个好问题。

此组合子的W3C CSS specification definition：

<块引用>

next-sibling combinator 由分隔两个复合选择器的“加号”（U+002B，+）代码点组成。两个复合选择器表示的元素在文档树中共享同一个父元素，第一个复合选择器表示的元素紧跟在第二个复合选择器表示的元素之前。考虑元素的邻接性时，会忽略非元素节点（例如元素之间的文本）。

复合选择器的定义如下：

<块引用>

复合选择器是一系列简单的选择器，没有被组合器分隔，代表单个元素上的一组同时发生的条件。如果它包含类型选择器或通用选择器，则该选择器必须在序列中排在第一位。序列中只允许使用一种类型选择器或通用选择器。（复合选择器在选择器语法中用

由此，我们可以推断类选择器本身就是一个简单选择器，因为它不表示单个元素上的一组同时发生的条件.但是，如果您查看规范文档中提供的第一个示例，您会注意到它使用简单的选择器only 和组合器，作为有效的 CSS：

<块引用>

示例：以下选择器表示紧跟在数学元素之后的 p 元素：数学+p

虽然这些是类型选择器，但在我看来，它们仍然是简单的选择器。因此，定义可能需要更新。因此，阅读规范并不能真正帮助解释为什么一个类在与下一个兄弟组合器（显然也称为 相邻兄弟组合器).

不管怎样，如果你想在特定类型的特定类之后立即选择特定类型的元素，你只需要在类之前提供一个类型。例如：

span.pin + span

也可以将伪类（例如 :hover）应用到使用 next-sibling 组合器的类。下面的示例将导致第二个 span 元素以某种方式发生变化，当第一个 span 元素用鼠标指针悬停在上面时。请注意，这不需要在类之前出现类型：

.pin:hover + span

通过我上面给出的两个例子，简单的类选择器实际上变成了一个复合选择器。但是，最右边的span类型选择器仍然是一个简单的选择器。

另一个班级

6 个答案: