6

我有一个div4 csscolumns并且我想选择第 3 列和第 4 列以使文本稍微变暗，因为我在文本和background-image. 这可能吗？我可以接受任何 css 或 js 解决方案。

这是演示。

- 编辑 -

似乎不可能找到伪块的选择器（如果我可以说的话），但是我仍然需要找出一种创建响应块（如列）的方法，该方法将在浏览器打开时平均分割文本（宽度）调整大小。

4

3 回答 3

4

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

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

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

- 编辑 -

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

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

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

代码示例的目的是概述如何实现这样的解决方案，并且应该改进以在实际应用程序中使用（例如，span每次styleCols运行时都会重新创建 s，大量控制台输出......）。

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

jsFiddle

于 2013-03-07T12:01:42.440 回答
3

现在我不认为你能做到，这里https://bugzilla.mozilla.org/show_bug.cgi?id=371323是一个开放的错误/功能请求，你可以投票给它。在此之前，您可以考虑使用表格。

附言

只是为了幽默而放弃并使用表格:)

于 2013-03-07T11:59:10.130 回答
1

我能想到的唯一解决方案是为中间列添加所需颜色的背景，根据大小和位置对其进行自定义，使其位于中间列的后面并制作background-clip:text。不幸的是，它没有得到很好的支持。你可以在这里找到更多的解释。

于 2013-03-07T12:39:33.760 回答