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

Question

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

提前致谢！

Answer 1

哟可以~为此使用选择器。像这样写：

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

检查这个http://jsfiddle.net/W4Vqk/1/

Answer 2

也许我没有抓住重点，但听起来你已经回答了自己的问题。您似乎知道您可以在 span 标签中进行包装hi，john然后应用 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; }

如果想要 name 和 john 的不同样式，只需为两个 span 标签提供不同的类