Javascript 我可以选择第n个css列吗?
我有一个带有4个cssJavascript 我可以选择第n个css列吗?,javascript,jquery,css,css-selectors,Javascript,Jquery,Css,Css Selectors,我有一个带有4个css列的div,我想选择第3列和第4列使文本稍微暗一些,因为文本和背景图像之间的对比度不好。这可能吗?我可以接受任何css或js解决方案 这是我的建议 --编辑-- 似乎不可能找到伪块的选择器(如果我可以这么说的话),但是我仍然需要找到一种创建响应块(如列)的方法,该方法可以在浏览器调整大小时平均分割文本(宽度)。目前我认为你做不到,这里有一个打开的bug/功能请求,你可以投赞成票。到那时你可以考虑使用表。< /P> 附言 只是为了幽默:)据我所知,您将无法将样式应用于专栏。
列的div
,我想选择第3列和第4列使文本稍微暗一些,因为文本和背景图像之间的对比度不好。这可能吗?我可以接受任何css或js解决方案
这是我的建议
--编辑--
似乎不可能找到伪块的选择器(如果我可以这么说的话),但是我仍然需要找到一种创建响应块(如列)的方法,该方法可以在浏览器调整大小时平均分割文本(宽度)。目前我认为你做不到,这里有一个打开的bug/功能请求,你可以投赞成票。到那时你可以考虑使用表。< /P>
附言
只是为了幽默:)据我所知,您将无法将样式应用于专栏。
但是,您可以尝试使用渐变作为背景,使第3列和第4列成为另一种颜色
#columns {
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%, blue 50%);
/*... appropriate css for other browser engines*/
}
更新了所有浏览器支持梯度
--编辑--
由于其目的实际上是改变文本的颜色,而不是第三和第四栏的背景,因此有一些额外的想法
目前,似乎不可能将样式应用于容器中的单个列。更改特定列中文本颜色的一种可能的解决方法是将每个单词放入span
中。然后使用JavaScript对单词进行迭代,并确定新列的起始位置。为第三列中的第一个元素指定一个新类,可以使用不同的文本颜色设置此元素和以下同级元素的样式
由于容器是响应布局的一部分,并且大小可能会发生变化,因此必须在调整大小事件上重新运行脚本,以考虑列宽的变化
代码示例的目的是概述如何实现此类解决方案,并应加以改进以用于实际应用程序(例如,每次运行styleCols
时都会重新创建span
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);
我能想到的唯一解决方案是为中柱添加一个您想要的颜色背景,根据大小和位置对其进行自定义,使其位于中柱后面,并制作背景剪辑:text
。不幸的是,它没有得到很好的支持。
你可以找到更多的解释。据我所知,没有办法做到这一点,也没有()一种实现的方法。@David我想是的。这就是为什么我试图找到一种用js实现这一点的方法。即使脚本创建了css列以外的块。这还不错,是一个替代解决方案。谢谢你的建议,但我希望更改第n列的文本颜色。如果我使用背景填充,我将隐藏背景图像。好的,这是一个困难的问题,我想不出任何CSS解决方案。也许您可以尝试通过JS确定哪些单词/字母在哪个列中,并将相关列的内容动态地包装到span
中,并采用那种样式?。为了使其更为严格,div
是响应性的。因此,我无法真正计算单词/字母,因为每列的宽度都会相应地改变。是的。这样的脚本可能必须在每次调整大小事件中重新运行。目前,最好更改背景/字体颜色,或为#columns
提供半透明背景,以获得足够高的对比度。希望dakait提到的特性要求能很快得到实现。。。表是我的第二个想法,但如果我至少能用css表制作它们,那就更好了。但我仍然面临着同样的第n个选择器问题,即display:table column
非常有前途,尽管它缺乏兼容性。
.first-in-col3, .first-in-col3~span {
color: red;
}