Theo như tôi biết bạn sẽ không thể áp dụng phong cách để các cột. Tuy nhiên, bạn có thể thử sử dụng độ dốc làm nền để tạo cột 3 và 4 màu khác.
#columns {
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%, blue 50%);
/*... appropriate css for other browser engines*/
}
updated jsFiddle cập nhật với tất cả các trình duyệt hỗ trợ độ dốc
- EDIT -
Kể từ khi ý định đã thực sự thay đổi màu sắc văn bản và không phải là nền cho cột thứ ba và thứ tư một số suy nghĩ bổ sung.
Hiện tại, dường như không thể áp dụng kiểu cho các cột đơn bên trong vùng chứa. Một cách giải quyết khác có thể thay đổi màu văn bản trong các cột cụ thể là đặt mọi từ trong một số span. Sau đó, sử dụng JavaScript để lặp qua các từ và xác định vị trí cột mới bắt đầu. Chỉ định phần tử đầu tiên trong cột thứ ba, một lớp mới sẽ làm cho nó có thể tạo kiểu này và các anh chị em sau với một màu văn bản khác.
Vì vùng chứa là một phần của bố cục đáp ứng và có thể thay đổi về kích thước, tập lệnh sẽ phải được chạy lại trên sự kiện thay đổi kích thước cho tài khoản để thay đổi độ rộng cột.
Mục đích của ví dụ mã là để phác thảo làm thế nào để thực hiện một giải pháp như vậy và cần được cải thiện để sử dụng trong một ứng dụng thực tế (ví dụ như span s đang được tái tạo mỗi khi styleCols đang chạy, rất nhiều giao diện điều khiển đầu ra. ..).
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
như xa như tôi biết, không có cách nào để làm điều đó – Luca
Không có (* [nhưng] (http://dev.w3.org/csswg/selectors4/#nth-column-pseudo) *) một thực hiện có nghĩa là để làm điều này. –
@ David Tôi nghĩ vậy. Đó là lý do tại sao tôi đang cố gắng tìm ra cách để làm điều này với js. Ngay cả khi kịch bản tạo khối khác với cột css. – otinanai