css - 仅当标签之间的某些文本时才使用 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 演示。

---

如果你有一个元素：

<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 演示。

---

如果你想根据其中的内容选择你的元素， 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()选择器- jQuery API 文档

Answer 2

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

这个答案适用于第一个孩子：

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

还有 last-child 和 nth child，但是 :First-child 是在 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/