CSS3 多列布局：如何设置特定列的样式

Posted 2023-05-08

【中文标题】CSS3 多列布局：如何设置特定列的样式

【英文标题】：CSS3 multi-column layout: How to style a particular column

【发布时间】：2012-08-20 21:40:33

【问题描述】：

我想要**bold** CSS 多列布局中的第一列

<div style="columns:12em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum</div>

有可能吗？

编辑： 由于这个问题将回答我的问题和海报问题，我想我会用我的问题来扩展这个问题......

问： 是否可以通过 javascript/jquery 知道该列在哪个字符处被拆分？

【问题讨论】：

使用 css :first-child 选择器选择给定选择器 reference.sitepoint.com/css/pseudoclass-firstchild 的第一个元素，您可以在这里找到更多信息，这里也有一个示例 tinkerbin.com/XY5QpQCA

@Breezer：这个div 没有子元素。

@BoltClock 是的，我得到它的地方很长，代码是关于 css3 列的>。

【参考方案1】：

虽然有点短，但答案是“不”——至少，W3C 的官方spec 中没有任何内容表明这是可能的。

【讨论】：

你打败了我！我也刚刚通读了！但是，如果需要，您可以改用 CSS 区域并设置它们的样式，但这在任何地方都不受支持。

嘿，抱歉 ;) 等不及要支持所有这些新的 CSS 功能了。

每次引入新的 CSS 模块时，我都会为 CSS3 将成为一个完整的标准而高兴。 It just doesn't work that way anymore.

这确实是件好事，特别是对于网页设计师来说，这意味着有两个阵营：旧的“我们使用 html4 + css2.1，因为它是标准化的”，新的“我们的网站看起来更好，加载尽可能更快，更具交互性”。基于能够提供更好的东西，我们无疑赢得了业务！

【参考方案2】：

虽然您的问题的答案是“否”，但问题仍然是您为什么要这样做？也许将文本的第一段加粗就足够了？这通常在杂志等中完成，并且很容易实现。