Question

在div或语义标记内设置多个段落的样式有什么更好，更有效但每个段落都有不同的样式？另外每当我在文章中放置一个h1就像你在我的代码中看到的那样，由于某些奇怪的原因它不是h1的实际大小，有人知道为什么吗？

示例：

<section>
    <article class="first_article">
        <h1>tio</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href=""><img src="contact-button.png" alt="contact_button" class="contact_button"></a>
        <img src="cupcake.png" alt="cupcake" class="cupcake">
    </article>
</section>

Answer 1

问题1

对于不同段落的样式，请查看CSS Selectors，它允许您根据DOM树中的位置识别各个元素。例如，定位<p>的第一个<article>子元素的一种方法是使用：

article p:first-of-type { //first <p> that is child of <article>
    color: yellow;
}

或

p:nth-child(2) { //all p tags that are second child elements (the first <p> in your case)
    color: yellow;
}

其中任何一个都将针对您案例中的第一个<p>元素。的 JS Fiddle Demo for Q1

问题2

将<h1>标记作为<article>标记的子标记会更改元素，它会缩小大小并添加边距。

它等同于以下CSS：

h1 { font-size: 1.5em; -webkit-margin-before: 0.83em; -webkit-margin-after: 0.83em; }

<强> JS Fiddle Demo for Q2

如果内部文章H1的风格不同？另外，如何在div中设置多个段落的样式？

1 个答案:

问题1

问题2