我可以选择第n个css列吗？ [英] Can I select an nth css column?

问题描述

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

这里是演示。

- EDIT -

不可能为伪块找到一个选择器（如果我可以说），但是我仍然需要找出一种方法来创建响应块（像列），每当调整浏览器大小。

解决方案

据我所知，你不能对列应用样式。然而，你可以尝试使用渐变作为背景，使列3和4另一种颜色。

  #columns {
 background：-webkit-linear-gradient（left，rgba（0,0,0,0）50％，blue 50％）; 
 / * ...适用于其他浏览器引擎的css * / 
} 
  

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

- EDIT -

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

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

因为容器是响应式布局，并且可以更改大小，则必须在resize事件上重新运行脚本以考虑更改列宽。

代码示例的目的是概述如何实现这样的解决方案，并且应当改进以用于实际应用（例如 span 每次 styleCols时重新创建

JavaScript

  function styleCols（）{
 // get #columns 
 var columns = document.getElementById（'columns'）; 
 //将文本拆分为单词
 var words = columns.innerText.split（''）; 
 //从#columns中删除文本
 columns.innerText =''; 
 
 // readd文本到#columns每个单词有一个span 
 var spans = [] 
 for（var i = 0; i  var span = document.createElement（'span'）; 
 span.innerText = words [i] +''; 
 spans.push（span）; 
 columns.appendChild（span）; 
} 
 
 //上一个单词的偏移量
 var prev = null; 
 //列的偏移量
 var colStart = null; 
 //列的编号
 var colCount = 0; 
 //具有特定偏移量的第一个元素
 var firsts = []; 
 //循环遍历
 for（var i = 0; i< spans.length; i ++）{
 var first = false; 
 var oL = spans [i] .offsetLeft; 
 console.info（spans [i] .innerText，oL）; 
 //测试这是否是带有此偏移的第一个span 
 if（firsts [oL] === undefined）{
 console.info（' -  first'）; 
 //将span添加到firsts 
 firsts [oL] = spans [i]; 
 first = true; 
} 
 //如果偏移量小于或等于前一个偏移量
 //是一个新行
 //如果偏移量也大于列偏移量we在
 //（第二行）新列
 if（（prev === null || oL< = prev）&& amp;（colStart === null || oL > colStart））{
 console.info（' -  col ++'，colCount + 1）; 
 //更新列偏移
 colStart = oL; 
 //提高列数
 colCount ++; 
} 
 //如果我们已经到达第三列
 if（colCount == 3）{
 //将我们的新类添加到具有列偏移$ b的第一个span $ b //（这是当前列中的第一个字段
 firsts [oL] .classList.add（'first-in-col3'）; 
 return; 
} 
 //更新prev以反映当前偏移
 prev = oL; 
} 
} 
 styleCols（）; 
 addEventListener（'resize'，styleCols，false） ; 
  

CSS

  .first-in-col3，.first-in-col3〜span {
 color：red; 
} 
  

jsFiddle

I have a div with 4 css columns and I'd like to select the 3rd and 4th column to make the text slightly darker because I don't have a good contrast between the text and the background-image. Is this possible? I can accept any css or js solution.

Here's the demo.

--EDIT--

It seems that it's not possible to find a selector for pseudo blocks (if I may say) however I still need to figure out a way of creating responsive blocks (like columns) that will split the text equally (in width) whenever the browser is resized.

解决方案

As far as I know you won't be able to apply styles to the columns. What you can try however is to use a gradient as a background to make columns 3 and 4 another color.

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

updated jsFiddle updated with all browser support gradient

-- EDIT --

Since the intention was actually to change the text color and not the background for the third and fourth column some additional thoughts.

For now it doesn't seem possible to apply styles to single columns inside a container. One possible workaround to change the text color in specific columns is to put every word inside a span. Then to use JavaScript to iterate over the words and determine where a new column starts. Assigning the first element in the third column a new class would make it possible to style this and the following siblings with a different text color.

Because the container is part of a responsive layout and could change in size, the script would have to be re-run on the resize event to account for changing column widths.

The purpose of the code example is to outline how to implement such a solution and should be improved for use in an actual application (e.g. the spans are being re-created every time styleCols is run, lots of console output...).

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

这篇关于我可以选择第n个css列吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！