我有一个 div 和 4 个 css columns，我想选择第 3 列和第 4 列以使文本稍微变暗，因为我在文本和 background-image 之间没有很好的对比.这可能吗？我可以接受任何 css 或 js 解决方案。
这是demo。
--编辑--
似乎找不到 伪块 的选择器（如果我可以说的话），但我仍然需要找出一种方法来创建响应块（如列）来拆分每当调整浏览器大小时，文本均等（宽度）。
【问题讨论】：
标签： javascript jquery css css-selectors
目前我认为你做不到，这里https://bugzilla.mozilla.org/show_bug.cgi?id=371323 是一个开放的错误/功能请求，你可以投票给它。在此之前，您可以考虑使用表格。
附言
Give Up and Use Tables 只是为了幽默:)
【讨论】：
display:table-column 相同的第 n 个选择器问题
据我所知，您无法将样式应用于列。 但是，您可以尝试使用渐变作为背景，使第 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 事件上重新运行脚本以解决列宽的变化。
代码示例的目的是概述如何实现这样的解决方案，并且应该改进以用于实际应用程序（例如，每次运行 styleCols 时都会重新创建 spans，很多控制台输出...）。
JavaScript
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);
CSS
.first-in-col3, .first-in-col3~span {
color: red;
}
【讨论】：
span 中并设置样式？
div 是响应式的。因此，我无法真正计算单词/字母，因为每列的宽度会相应变化。
#columns 一个半透明背景以实现足够高的对比度。并希望 dakait 提到的功能请求能够尽快实现。
我能想到的唯一解决方案是为中间列添加所需颜色的背景，根据大小和位置对其进行自定义，使其位于中间列后面并制作background-clip:text。不幸的是，它没有得到很好的支持。
你可以找到更多的解释here。
【讨论】：