如何通过CSS或JavaScript定位CSS多列布局中的第二列并设置样式？

嘿，这个需求挺贴合实际场景的——用column-count把单个div的文本拆成两列，还得单独给第二列加样式，又不能把内容拆成两个容器对吧？我整理了两个靠谱的方案，都能满足你单div的要求：

方案一：纯CSS实现（简洁但有属性限制） #

这个方案利用CSS列布局专属的::first-column伪元素来实现，不用动JS，代码很简洁：

代码示例 #

HTML保持你原来的结构不变：

<div>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat. <br/>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</div>

修改后的CSS：

div {
  column-count: 2;
  color: red; /* 先给所有文本设置第二列需要的样式（比如红色） */
}

div::first-column {
  color: #333; /* 用伪元素把第一列的样式覆盖回默认 */
}

原理说明 #

::first-column是CSS为多列布局提供的伪元素，专门用来选中第一列的所有内容。我们反过来操作：先给整个div设置第二列需要的样式，再用这个伪元素把第一列的样式改回去，就间接实现了第二列单独样式的效果。

不过要注意，::first-column支持的CSS属性有限，像颜色、字体、背景这类文本相关属性没问题，但margin、padding这类盒模型属性就不支持了。如果你的样式需求比较复杂，可以试试下面的JS方案。

方案二：JavaScript动态包裹（灵活无属性限制） #

这个方法通过JS计算布局，把第二列的内容动态包裹在一个span标签里，既能保持所有内容在同一个div中，又能给第二列加任意CSS样式：

代码示例 #

先给div加个id方便JS选择：

<div id="column-text">Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat. <br/>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</div>

CSS保持基础的列布局：

#column-text {
  column-count: 2;
}

然后添加JS代码：

const columnDiv = document.getElementById('column-text');
// 获取div里的文本节点和换行标签
const textNodes = Array.from(columnDiv.childNodes).filter(node => 
  node.nodeType === Node.TEXT_NODE || node.tagName === 'BR'
);

// 计算单列的高度（两列等高，总高度除以2）
const columnHeight = columnDiv.offsetHeight / 2;
let currentHeight = 0;
let secondColumnStartIndex = 0;

// 遍历节点，找到第一列结束的位置
for (let i = 0; i < textNodes.length; i++) {
  const node = textNodes[i];
  if (node.tagName === 'BR') {
    // 估算换行的高度（基于行高，这里假设行高是字体大小的1.2倍）
    const fontSize = parseFloat(getComputedStyle(columnDiv).fontSize);
    currentHeight += fontSize * 1.2;
  } else {
    // 创建临时span计算文本节点的高度
    const tempSpan = document.createElement('span');
    tempSpan.textContent = node.textContent;
    columnDiv.appendChild(tempSpan);
    currentHeight += tempSpan.offsetHeight;
    columnDiv.removeChild(tempSpan);
  }
  // 当累计高度超过单列高度时，记录第二列的起始位置
  if (currentHeight >= columnHeight) {
    secondColumnStartIndex = i + 1;
    break;
  }
}

// 创建包裹第二列的span并设置样式
const secondColumnSpan = document.createElement('span');
secondColumnSpan.style.color = 'red';
// 可以添加更多样式，比如：
// secondColumnSpan.style.fontWeight = 'bold';
// secondColumnSpan.style.backgroundColor = '#f5f5f5';

// 把第二列的节点移到span中
for (let i = secondColumnStartIndex; i < textNodes.length; i++) {
  secondColumnSpan.appendChild(textNodes[i]);
}

// 将span放回原div
columnDiv.appendChild(secondColumnSpan);

// 可选：监听窗口 resize 事件，窗口变化时重新计算
window.addEventListener('resize', () => {
  // 先移除之前的span
  const oldSpan = columnDiv.querySelector('span');
  if (oldSpan) {
    // 把span里的节点放回div
    while (oldSpan.firstChild) {
      columnDiv.insertBefore(oldSpan.firstChild, oldSpan);
    }
    oldSpan.remove();
  }
  // 重新执行上面的计算逻辑（可以把计算逻辑封装成函数）
});

原理说明 #

这个方法的核心是先计算出单列的高度，然后逐个统计文本节点的高度，找到第一列结束的位置，把之后的所有内容包裹在一个span里，再给这个span设置样式。这样既保持了所有内容在同一个div中，又能灵活添加任何CSS样式，不受伪元素的属性限制。如果窗口大小变化，还可以通过监听resize事件重新计算，保证样式始终正确。

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