CSS仅在标签之间的某些文本时

Question

假设我有这个HTML：

<p class="test">foo</p>

<p class="test">bar</p>

有没有办法可以让它只选择第一行。所以css就像

那样

.test:(text="foo") {

}

但只使用css？

编辑：遗憾的是，用纯CSS无法完成。

非常感谢

Answer 1

如果你有多个元素：

<p class="test">foo</p>
<p class="test">bar</p>
<p class="test">zed</p>

并想要选择第一个，然后您可以使用:first-child选择器：

.test:first-child {
    color: red;
}

• 您可以查看jsFiddle demo。

---

如果您有一个元素：

<p class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas.</p>

并想要选择第一行，然后您可以使用:first-line选择器：

.test:first-line {
    color: red;
}

• 您可以查看jsFiddle demo。

---

如果你想根据其中的内容选择你的元素，那么CSS不可能，你必须javascript它，例如jQuery有一个实现：

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

<script>
    $("div:contains('John')").css("text-decoration", "underline");
</script>

• :contains() Selector - jQuery API文档

Answer 2

* 编辑：提问者不想要第一个孩子，而是希望它基于一个字符串，而你不能用纯CSS做。以下答案适用于第一胎实施*

这个答案适合第一个孩子：

如果它只是第一个你需要的：first-child伪元素。

还有最后一个孩子和第n个孩子，但是：第一个孩子是在IE8及更早版本中可以安全使用的孩子，但你必须有一个doctype：

http://www.w3schools.com/cssref/sel_firstchild.asp

http://quirksmode.org/css/selectors/firstchild.html

你需要做的是这样的事情：

p:first-child {
    /* CSS Styles */
}

这是一个小工具：

http://jsfiddle.net/shayl/KwWjt/