Question

我有一个div有4个css columns，我想选择第3和第4列，使文字稍暗，因为我的文字和文字之间没有很好的对比background-image。这可能吗？我可以接受任何css或js解决方案。

这是demo。

- 编辑 -

似乎找不到伪块的选择器（如果我可以说）但是我仍然需要找到一种创建响应块（如列）的方法来分割每当调整浏览器大小时，文本均等（宽度）。

Answer 1

据我所知，您将无法将样式应用于列。然而，您可以尝试使用渐变作为背景，使第3列和第4列成为另一种颜色。

#columns {
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%, blue 50%);
    /*... appropriate css for other browser engines*/
}

updated jsFiddle 使用所有浏览器支持渐变更新

- 编辑 -

由于意图实际上是改变文本颜色，而不是第三和第四列的背景，还有一些额外的想法。

现在似乎无法将样式应用于容器内的单个列。更改特定列中文本颜色的一种可能解决方法是将每个单词放在span内。然后使用JavaScript迭代单词并确定新列的开始位置。在第三列中为第一个元素分配一个新类，可以使用不同的文本颜色设置这个和以下兄弟的样式。

由于容器是响应式布局的一部分，并且可能会更改大小，因此必须在resize事件上重新运行该脚本以考虑更改列宽。

代码示例的目的是概述如何实现这样的解决方案，并且应该进行改进以便在实际应用程序中使用（例如，span每次styleCols时都会重新创建function styleCols() { // get #columns var columns = document.getElementById('columns'); // split the text into words var words = columns.innerText.split(' '); // remove the text from #columns columns.innerText = ''; // readd the text to #columns with one span per word var spans = [] for (var i=0;i<words.length;i++) { var span = document.createElement('span'); span.innerText = words[i] + ' '; spans.push(span); columns.appendChild(span); } // offset of the previous word var prev = null; // offset of the column var colStart = null; // number of the column var colCount = 0; // first element with a specific offset var firsts = []; // loop through the spans for (var i=0;i<spans.length;i++) { var first = false; var oL = spans[i].offsetLeft; console.info(spans[i].innerText, oL); // test if this is the first span with this offset if (firsts[oL] === undefined) { console.info('-- first'); // add span to firsts firsts[oL] = spans[i]; first = true; } // if the offset is smaller or equal to the previous offset this // is a new line // if the offset is also greater than the column offset we are in // (the second row of) a new column if ((prev === null || oL <= prev) && (colStart === null || oL > colStart)) { console.info('-- col++', colCount + 1); // update the column offset colStart = oL; // raise the column count colCount++; } // if we have reached the third column if (colCount == 3) { // add our new class to the first span with the column offset // (this is the first span in the current column firsts[oL].classList.add('first-in-col3'); return; } // update prev to reflect the current offset prev = oL; } } styleCols(); addEventListener('resize', styleCols, false);运行，很多控制台输出......）。

<强>的JavaScript

.first-in-col3, .first-in-col3~span {
    color: red;
}

<强> CSS

{{1}}

jsFiddle

Answer 2

目前我不认为你可以这样做，这里https://bugzilla.mozilla.org/show_bug.cgi?id=371323是一个开放的错误/请求功能，你可以投票。然后你可以考虑使用表格。

P.S。

Give Up and Use Tables只是为了幽默：）

Answer 3

我能想到的唯一解决方案是为中间列提供所需颜色的背景，根据尺寸和位置对其进行自定义，使其位于中间列的后面并制作background-clip:text。不幸的是，它得不到很好的支持。您可以找到更多的展示here。

我可以选择第n个css列吗？

3 个答案: