Question

我正在尝试定位功能列表。在我的CSS中，我有：

.skills .about {
    width: 490px;
    text-align: justify;
    line-height: 20px;
    /*letter-spacing: 0px;*/

}   

    .skills .about ul li {
        display: none;
    }

我不知道如何定位特定的UL列表。我需要更改列表的line-height以匹配line-height类的.skills .about。我该怎么做？

<div id="about">
    <div class="aboutText">
        <h1>Who's Sam Jarvis?</h1>
        <div class="skills">
            <span class="h2span"><h2>Bio</h2></span>
            <p class="about">
                I’m a Freelance Designer currently working out of Holland Landing, Ontario. Over the last three years I’ve spent my time as a Graphic Design student at Seneca@York honing my skills and creating many of the works that are currently in my portfolio. The creative field is where I strive and though I get paid to design I also dabble in photography, illustration, playing guitar and <strong>wheeled foot maneuvers</strong>.
            </p>
            <h2>Education</h2>
            <p class="about">
                Advanced Diploma in Graphic Design
                Seneca College of Applied Arts and Technology
            </p>
            <h2>Capabilities</h2>
            <p class="about">
                <ul>
                    <li>Branding & Art Direction</li>
                    <li>Interface Design</li>
                    <li>Adobe Creative Suite</li>
                    <li>Web Standards & Accessibility</li>
                </ul>
            </p>
        </div>
    </div>
</div>

Answer 1

根据HTML standard，p元素在任何“块级”元素之前隐式关闭，包括ul。所以你的标记实际上等同于

    <h2>Capabilities</h2>
    <p class="about">
    </p><ul>
         <li>Branding & Art Direction</li>
         <li>Interface Design</li>
         <li>Adobe Creative Suite</li>
         <li>Web Standards & Accessibility</li>
    </ul>
    <p></p>

并且ul是p.about的直接兄弟：

.about + ul { ... }

但是将.about类设置为ul本身会不会更容易？

Answer 2

.about li {line-height: 20px}

或者如果你想更具体：

.skills > .about li {line-height: 20px}

使用css定位特定的嵌套UL列表

2 个答案: