如何使用span在所选字符和其他字符之间创建不同的样式？

Question

假设我有<p>hi my name is john</p>。我知道我可以使用span来选择字符，然后使用CSS使它们的样式与文本的其余部分不同。但是，如果我希望“名字”和“约翰”与句子的其余部分不同，并且彼此之间，这甚至可能吗？如果是这样，这是如何实现的？

提前致谢！

Answer 1

Yo可以使用~选择器。写得像这样：

p span{ color: red;  }
p span ~ span{color:green}

选中此http://jsfiddle.net/W4Vqk/1/

Answer 2

也许我会忽略这一点，但听起来你已经回答了自己的问题。您似乎知道可以将hi和john包含在span标记中，然后应用css来设置样式。

http://jsfiddle.net/W4Vqk/

p span:first-child {  }
p span:last-child {  }

<p><span>hi</span>my name is <span>John</span></p>

或者使用类名

http://jsfiddle.net/ZegR2/

span.foo {  }
span.bar {  }

<p><span class="foo">hi</span>my name is <span class="bar">John</span></p>

Answer 3

就这样做

<p>hi my <span>name</span> is <span>john</span></p>

在css中

p span { color:#666666; }

如果想要名称和john的不同样式，只需为两个span标记赋予不同的类