Question

我有这个清单：

<ul id="expList">
    <li class="boldFont">Skills and technologies
        <ul>
            <li class="boldFont">.NET
                <ul>
                    <li>C#</li>
                    <li>ASP.NET</li>
                    <li>ADO.NET Entity framework</li>
                </ul>
            </li>
            <li class="boldFont">Data access
                <ul>
                    <li>SQL</li>
                </ul>
            </li>
            <li class="boldFont">Web
                <ul>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>jQuery</li>
                    <li>javaScript</li>
                </ul>
            </li>
            <li class="boldFont">Graphic design
                <ul>
                    <li>Photoshop</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我想选择内部有li的{{1}}元素（可扩展ul，我使用jQuery使列表可扩展）。这意味着我想在li中设置文本样式：技能和技术， .NET ，数据访问， Web ，平面设计，而不是孩子。我已尝试直接向我的目标添加一个班级li，但这对所有孩子都有影响。

Answer 1

您可以在选择器中执行此操作：

$("#expList li:has(ul)").somefunction()

Answer 2

您可以使用！important在您的css上执行此操作：

li.boldFont {
  font-weight: bold !important;
}
ul li.boldFont li {
  font-weight: normal;
}

小提琴：https://jsfiddle.net/L99c28kf/

但我认为这不是最佳解决方案您可以添加<span>而不是boldFont类，并使用css将它们加粗（使用li > span之类的选择器），或者只使用<strong>标记。

Answer 3

你可以在span标签中包含你想要粗体的单词吗？例如：

ul#expList li > span {
  font-weight: bold;
}

<ul id="expList">
    <li class="boldFont"><span>Skills and technologies</span>
        <ul>
            <li class="boldFont"><span>.NET</span>
                <ul>
                    <li>C#</li>
                    <li>ASP.NET</li>
                    <li>ADO.NET Entity framework</li>
                </ul>
            </li>
            <li class="boldFont"><span>Data access</span>
                <ul>
                    <li>SQL</li>
                </ul>
            </li>
            <li class="boldFont"><span>Web</span>
                <ul>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>jQuery</li>
                    <li>javaScript</li>
                </ul>
            </li>
            <li class="boldFont"><span>Graphic design</span>
                <ul>
                    <li>Photoshop</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

在li元素中选择文本，而不是孩子？

3 个答案: