HTML5中text-indent仅左列生效问题及CSS选择器差异咨询

一、为什么右列text-indent不生效？怎么解决？ #

咱们先拆解问题的核心原因：

1. text-indent的作用限制：text-indent属性只对块级元素生效，你代码里的<span>是行内元素，给它加text-indent其实根本起不了作用。你看到左列有缩进，实际是.newspaper这个块级容器的text-indent在生效——但它只会作用于整个容器的第一行文本（也就是左列的首行），右列的首行属于容器内容被拆分后的后续部分，自然不会被这个全局的text-indent影响。

2. 多列布局的内容拆分逻辑：CSS多列布局（column-count）会自动把容器内的流式内容拆分到列中，但默认不会给每列的首行单独加缩进，除非你把内容拆成独立的块级段落。

解决方法： #

最稳妥的方式是把每个段落内容包装成独立的块级元素（比如<p>），然后给这些块级元素设置text-indent，这样不管内容被拆分到哪一列，每个段落的首行都会自动缩进：

修改后的代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
body{
width:600px;
}
.newspaper {
text-align: justify;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
font-family: "Times New Roman", Times, serif;
}
/* 给.newspaper内的每个p标签设置首行缩进 */
.newspaper p {
text-indent: 2em;
margin: 0; /* 可选：去掉默认p标签的边距，保持排版一致 */
}
</style>
</head>
<body>
<div class="newspaper">
<p><span>yuyuy yuyuy yuyuy yuy</span> amet, consectetuer adipiscing elit. feeeeeeeeeeeeeeee</p>
<p><span>yuyuy yuyuy yuyuy yuy</span> amet, consectetuer adipiscing elit. feeeeeeeeeeeeeeee</p>
</div>
</body>
</html>

如果不想修改HTML结构，也可以尝试用CSS伪元素给每列首行加缩进（兼容性稍差，需根据需求调整）：

.newspaper::first-line {
  text-indent: 2em;
}

二、.newspaper, span{} 和 .newspaper span{} 的区别 #

这是两种完全不同的CSS选择器类型：

• .newspaper, span{}：并集选择器
  逗号代表“或”的关系，这个选择器会选中所有带有.newspaper类的元素，以及所有<span>元素——不管这些span是不是在.newspaper容器里，都会被应用样式。比如页面其他位置的span也会被影响。

• .newspaper span{}：后代选择器
  这个选择器只会选中嵌套在带有.newspaper类的元素内部的<span>元素，页面上不在.newspaper里的span完全不会受到这个样式的影响。

简单说，前者是“两个独立的选择器组”，后者是“限定范围的子元素选择器”。

内容的提问来源于stack exchange，提问作者waleedd32