不要使用 CSS 缩进第一段的第一行

Question

如何防止节中第一段的行缩进？

这对于许多学术形式来说很常见。

示例输出

Introduction

For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.

For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.

For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.

现在，我的 CSS

中有以下代码

p {
  text-indent: 50px;
}

Answer 1

您可以这样使用 CSS Adjacent sibling combinator：

p + p {
  text-indent: 50px;
}

运行代码看结果

p + p {
  text-indent: 50px;
}

<h1>Introduction</h1>

<p>For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.</p>

<p>For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.</p>

<p>For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.</p>

Answer 2

您可能想要使用 css 伪 class 'first-of-type'

p:first-of-type {
  text-indent: 0;
}

因为 css 选择器暗示样式将仅应用于第一个 p 元素。

Answer 3

你是对的，不要缩进第一段的第一行。为了吸引眼球，请使用初始上限（将读者人数增加 15% 左右）。

但是，在最佳排版实践中，您应该只使用其中之一：1) 段落之间的 space（请注意，不是整个 space）并且没有缩进或 2) 段落之间没有 space，但第一行缩进。

* {
  margin: 0;
  padding: 0;
}
h3 {
  font-family: Georgia;
  font-size: 1.5rem;
  line-height: 1.3rem;
  font-weight: normal;
  margin: 2.0rem 0;
}
p {
  font-family: Georgia;
  font-size: 1.0rem;
  line-height: 1.3rem;
}
.space-noindent p {
  margin-bottom: 0.8rem;
}
.nospace-indent p:nth-child(1n+2) {
  text-indent: 1.5rem;
}
.space-noindent p:nth-of-type(1):first-letter{
  font-size: 2.5rem;
}

<div class="space-noindent">
<h3>Space, no indent:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>
<h3>No space, indent:</h3>
<div class="nospace-indent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>

不要使用 CSS 缩进第一段的第一行

Dont Indent First Line of First Paragraph using CSS

html

css

formatting

text-formatting

Introduction

运行代码看结果