通过 CSS 访问 html 内容？答案

【问题标题】：access html content through CSS?通过 CSS 访问 html 内容？
【发布时间】：2011-01-16 11:24:42
【问题描述】：

<div id=menu>
 <ul>
  <li class="section-title">auto-text1</li>
  <li class="section-title">auto-text2</li>
  <li class="section-title">auto-text3</li>
 </ul>
</div>

如何通过css对auto-text3进行特殊处理？

【问题讨论】：

标签： html css-selectors css

【解决方案1】：

你可以使用:nth-of-type() pseudo-class selector:

#menu > ul > li.section-title:nth-of-type(3)

这将选择所有li 元素中的第三个元素，其类为section-title。

【讨论】：

【解决方案2】：

请参阅第 6.6.5.7 节。 CSS3 - 未来 - 提案：

:last-child 伪类

与 :nth-last-child(1) 相同。 :last-child 伪类表示一个元素，它是某个其他元素的最后一个子元素。

ul > li:last-child { }

http://www.w3.org/TR/css3-selectors/#last-child-pseudo

（在您的示例中，</menu> 可能意味着结束 </div>。）

目前我想最好还是使用标记第一个和最后一个列表元素的类，或者在你的#menu id 上使用简单的 Javascript。

【讨论】：

请记住，需要最后一个子浏览器支持：quirksmode.org/css/contents.html#t37

【解决方案3】：

为了澄清其他答案，（目前）没有任何 CSS 选择器可让您根据其内容选择元素。

【讨论】：

如果我需要根据其内容选择一个元素？我需要使用 jquery/客户端脚本工具？