【问题标题】: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

      (在您的示例中,&lt;/menu&gt; 可能意味着结束 &lt;/div&gt;。)

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

      【讨论】:

      【解决方案3】:

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

      【讨论】:

      • 如果我需要根据其内容选择一个元素?我需要使用 jquery/客户端脚本工具?
      猜你喜欢
      • 2012-02-29
      • 2021-12-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-12
      • 2020-12-24
      • 1970-01-01
      相关资源
      最近更新 更多