Question

如果在文章＆gt; div中而不是在artcicle＆gt; div＆gt; div中，如何使列表及其项目样式有所不同？我试图不必使用！重要。我试图在文章中使字体更大...以下是我认为可行的代码。

    article#home-left ul.list-arrows {
        margin:1.5rem 0 2rem 3rem;
        font-size:4rem;
    }

    article ul.list-arrows {
        margin:1.5rem 0 2rem 3rem;
        font-size:4rem;
    }

 <article>
    <ul>
      <li>Smaller font</li>
    </ul>

    <div id="home-left">
      <ul>
        <li>Largerfont</li>
      </ul>
    </div>

 </article>

Answer 1

你非常接近。

您的文章的ID不是#home-left，ID已附在文章的祖先上，所以

article#home-left ul li {
    margin:1.5rem 0 2rem 3rem;
    font-size:4rem;
}

应该是这个

article #home-left ul li {
    margin:1.5rem 0 2rem 3rem;
    font-size:4rem;
}

HTML中似乎没有list-arrows类，所以为了这个答案，我忽略了它。

Answer 2

你想这么做吗？

HTML

 <article>
    <ul class="list-arrows">
      <li>Smaller font</li>
    </ul>

    <div id="home-left">
      <ul class='list-arrows'>
        <li>Largerfont</li>
      </ul>
    </div>

 </article>

CSS

#home-left ul.list-arrows {
    margin:1.5rem 0 2rem 3rem;
    font-size:4rem;
}

article ul.list-arrows {
    margin:1.5rem 0 2rem 3rem;
    font-size:2rem;
}

FIDDLE：https://jsfiddle.net/6yf8eno3/

Answer 3

这似乎有效：

<强> HTML

<article>
    <ul>
        <li class="list-arrows">Smaller font</li>
    </ul>

    <div id="home-left">
        <ul>
            <li class="list-arrows">Largerfont</li>
        </ul>
    </div>
</article>

<强> CSS

article ul .list-arrows {
    margin:1.5rem 0 2rem 3rem;
    font-size:2rem;
}

#home-left ul .list-arrows {
    margin:1.5rem 0 2rem 3rem;
    font-size:4rem;
}

定位不同ID中的相同html元素

3 个答案: