Question

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

    <ul>
        <li>Interests
            <ol>
                <li style="color: orange">Basketball</li>
                <li>Coding</li>
                <li>Weight Lifting</li>
            </ol>
        </li>
        <li>Jobs
            <ul>
                <li>Tutor</li>
                <li>Salon Associate</li>
            </ul>
        </li>           
    </body>
</html>

如何修改“兴趣”（例如更改其字体颜色）没有也修改有序列表它是标题？

Answer 1

此处不需要课程或包装：

演示：http://jsfiddle.net/abhitalks/jgbX7/

li { /* reset all list items */
    color: black; 
}
:not(li) > ul > li { /* all "li" under "ul" which are not under "li" */
    color: red;
}

但是，当然如果您有多个这样的列表，那么在顶部ul提供一个类会有所帮助。

Answer 2

你应该可以给它一个班级，即

<li class="bob">

然后：

li.bob
{
    color: #C1C1C1;
}
li
{
    color:  black;
}

然后在你的样式部分中引用它

实际颜色样式，仅供参考 - 但您明白了。

Answer 3

您可以将Interests包裹在<span>标记中并对其进行样式化。

改变的部分：

<li><span style="color: red">Interests</span>

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

    <ul>
        <li><span style="color: red">Interests</span>
            <ol>
                <li style="color: orange">Basketball</li>
                <li>Coding</li>
                <li>Weight Lifting</li>
            </ol>
        </li>
        <li>Jobs
            <ul>
                <li>Tutor</li>
                <li>Salon Associate</li>
            </ul>
        </li>           
    </body>
</html>

Answer 4

快速简便的方法是在它周围加<span>然后你可以应用任何风格

Answer 5

如果选择包含文本的li和包含CSS的其他列表并应用color等样式，则如果未明确排除，这也适用于子元素。

将文本包装在另一个元素中：

    <li><span>Interests</span>
        <ol>

它有效且重量轻，您可以直接应用样式。

此外，您的ul应该关闭，title元素不能为空。

Answer 6

你可以使用内联css 假设

<li><span style="color:blue;">Interests</span>
</li>

在HTML中修改列表标题

6 个答案: