定位特定列（使用 CSS 多列）答案

【问题标题】：Target specific column (using CSS multi-columns)定位特定列（使用 CSS 多列）
【发布时间】：2020-07-31 22:28:10
【问题描述】：

我得到了一个包含两列的文本（通过 column-count 属性），我只想定位第二列，例如，我可以在其上应用红色。我该怎么做，在 CSS 或 Javascript 中？我知道我可以创建两个容器，所以我只需要操作第二个 div，但就我而言，我需要将所有文本放在一个 div 中。

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;
}

【问题讨论】：

这么少的代码很难说，但是如果你只有两列并且只想影响第二列，你可以使用最后一个子 CSS 选择器。
这能回答你的问题吗？ targeting nth column(made by column-count)
对我来说是个难题，这个 div 中没有任何选择器，我可以创建两个
选择器，所以我只需要 p:last-child() 来操作它，但是客户必须分别创建两个文本，因此每个选择器一个...因为没有第 n 列属性或类似的东西

标签： javascript html css

【解决方案1】：

这是一个小技巧，但这不是定位列的最佳方法，我想根据this answer 定位一列没有特殊的方法

div {
  column-count: 2;
  position: relative;
}

div::before {
  content: '';
  background: yellow;
  mix-blend-mode: color;
  height: 100%;
  width: 50%;
  position: absolute;
}

<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>

要清楚地理解它，如果您有超过两列，它将无法正常工作，因此您必须在此处执行此操作

div:before{
        width: calc(100% / n);
    }

n 是仅针对一列的列数，或者如果您想针对多个列，则可以使用宽度计算

【讨论】：

我的回答对你有帮助吗？

【解决方案2】：

坏消息 - 这是不可能的，也许有一天。

我知道您想要拆分文本颜色，您有一个理由和一个想法...如果任何技巧或解决方法有效 - 继续！

或者也许你的预期目标可以通过改变背景来实现？每列的颜色不同？

.gradient{ background: linear-gradient( to left, lightblue, white, pink);}

还有一件事 - 如果是文本块，它应该是 <p> 而不是 <div> - 对于盲人屏幕阅读器来说这很重要

【讨论】：

【解决方案3】：

你可以这样做，它不会直接选择第二行但它可以工作：

.col:not(first-line) { 
   color:green;
 } 

.col:first-line{
  color:black;
}

&lt;div class="col"&gt;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. &lt;br/&gt;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.&lt;/div&gt;

【讨论】：