子元素的 CSS 选择器

标签 css

试图为此找到 CSS 选择器,但未能成功。

我需要具有类 rtIn 的 Span,其中其父级 UL 必须是 li 的子级

我试过了,但它适用于每个节点

.rtLI > ul > li > div > Span.rtIn {
    font-size: 10px;
}

<ul class="rtUL">
    <li class="rtLI">
        <div class="rtTop">
            <span class="rtSp">Parent</span>
            <span class="rtMinus"></span>
           <span class="rtIn"></span>
        </div>
        <ul class="rtUL">
            <li class="rtLI rtLast">
                <div class="rtBot">
                    <span class="rtSp"></span>
                    <span class="rtIn">Child</span>// i required this Span
                </div>
            </li>
        </ul>
    </li>
    <li class="rtLI">
        <div class="rtMid">
            <span class="rtSp"></span>
            <span class="rtIn">Child</span>
        </div>
    </li>
    <li class="rtLI rtLast">
        <div class="rtBot">
            <span class="rtSp"></span>
            <span class="rtIn">Child</span>
        </div>
    </li>
</ul>

有什么更正吗?

这是在 FireFox 和 Chrome 中的输出

enter image description here

最佳答案

.rtLI > ul > li > div > Span.rtIn {
    font-size: 10px;
}
    <ul class="rtUL">
     <li class="rtLI">
       <div class="rtTop">
        <span class="rtSp"></span>
         <span class="rtMinus"></span>
          <span class="rtIn"></span>
        </div>
        <ul class="rtUL">
         <li class="rtLI rtLast">
           <div class="rtBot">
             <span class="rtSp"></span>
             <span class="rtIn"></span>// i required this Span
           </div>
         </li>
        </ul>
       </li>
       <li class="rtLI">
        <div class="rtMid">
         <span class="rtSp"></span>
         <span class="rtIn"></span>
        </div>
       </li>
      <li class="rtLI rtLast">
       <div class="rtBot">
         <span class="rtSp"></span>
         <span class="rtIn"></span>
        </div>
       </li>
     </ul>

选择器起作用了!

您的 HTML 代码有一个HTML 语法错误:

你有:

   span class="rtIn"></span>

应该是:

   <span class="rtIn"></span>

Google Chrome 正在获取 CSS 样式:

Google Chrome Inspector snapshot

关于子元素的 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26357892/

相关文章:

Jquery UI 可排序、滚动(jsFiddle 示例)

html - 使用 CSS 垂直对齐 <a> 元素中的文本

html - 为使用来自 asp.net 的 XSL 创建的 html 应用外部 .css

javascript - 将我的图片放在轮播旁边

css - 如何使应用程序脚本 Web 应用程序显示为实际可用高度的 100%?

html - 如何使前景垂直滚动而不是背景

javascript - 我有一个带有 JQuery 的简单图像图片 slider ,但我不知道如何向上或向下设置动画

css - 在 JSP 中围绕 2 个按钮创建简单的线条边框

html - 如何让两个垂直元素之一的高度依赖于另一个?

css - 移动设备上的 Wordpress 下拉菜单没有响应/工作