Phong cách thư thứ n trong một khoảng thời sử dụng CSS

tôi có:Phong cách thư thứ n trong một khoảng thời sử dụng CSS

<span id="string">12h12m12s</span>

và tôi đang tìm cách để làm cho h, m và s nhỏ hơn so với phần còn lại của văn bản. Tôi đã nghe nói về các yếu tố nth-letter giả trong css, nhưng nó dường như không có tác dụng:

#string:nth-letter(3), 
#string:nth-letter(6), 
#string:nth-letter(9) { 
    font-size: 2em; 
}

Tôi biết tôi có thể sử dụng javascript để phân tích chuỗi và thay thế ký tự với xung quanh span thẻ và phong cách thẻ. Tuy nhiên, chuỗi được cập nhật mỗi giây và có vẻ như phân tích cú pháp thường sẽ là nguồn cấp dữ liệu chuyên sâu.

Nguồn

2013-04-14 n0pe

+12

Bởi vì một điều như vậy không tồn tại. Bạn có thể đã đọc nó từ một blog đề xuất triển khai của nó - xem http://css-tricks.com/a-call-for-nth-everything/ và cuộn xuống ":: nth-letter()/:: last -letter()/:: nth-last-letter() "- và có, bạn có thể dễ dàng đạt được điều này với JS. –

@ FabrícioMatté, tôi đã có một cảm giác ... Bạn có thể đề xuất một cách khác để làm điều này (trong js tôi giả định) sẽ đủ hiệu quả để chạy mỗi giây? – n0pe

Có thể một cái gì đó như thế này http://codepen.io/FWeinb/pen/djuIx –

Hiệu suất khôn ngoan, tôi khuyên bạn nên sử dụng địa chỉ span.

<span id="string"><span id="h">12</span><span class="h">h</span><span id="m">12</span><span class="m">m</span><span id="s">12</span><span class="s">s</span></span>

Một khoảng thời gian cho mỗi h, m và s chữ, do đó bạn có thể tạo kiểu cho họ đúng cách (có thể áp dụng một trong hai phong cách tương tự hoặc khác nhau cho mỗi).

Và một khoảng khác cho mỗi số để bạn có thể lưu vào bộ nhớ cache các tham chiếu. Tóm lại, đây là một JS cho một chiếc đồng hồ địa phương thời gian rất đơn giản:

//cache number container element references 
var h = document.getElementById('h'), 
    m = document.getElementById('m'), 
    s = document.getElementById('s'), 
    //IE feature detection 
    textProp = h.textContent !== undefined ? 'textContent' : 'innerText'; 

function tick() { 
    var date = new Date(), 
     hours = date.getHours(), 
     mins = date.getMinutes(), 
     secs = date.getSeconds(); 
    h[textProp] = hours < 10 ? '0'+hours : hours; 
    m[textProp] = mins < 10 ? '0'+mins : mins; 
    s[textProp] = secs < 10 ? '0'+secs : secs; 
} 
tick(); 
setInterval(tick, 1000);

Fiddle

này minh họa ý tưởng cơ bản của bộ chọn cache. Bằng cách không tái tạo các yếu tố, bạn cũng có một tăng hiệu suất tốt.

Mặc dù, một lần thứ hai không phải là công việc rất nặng đối với một cái gì đó rất đơn giản (trừ khi bạn có hàng trăm đồng hồ trong trang của mình).

Nguồn

2013-04-14 00:37:27

Đó là phần giới thiệu thú vị nhất cho câu trả lời –

Đây có thể là một cách làm việc dài bằng cách sử dụng javascript và jQuery, nhưng đây là giải pháp khả thi.

Tách riêng h, m & s từ chuỗi gốc.

string = $('#string').text(); 

hD = string.substr(0,2) 
h = "<span>"+string.substr(2,1)+"</span>"; 
mD = string.substr(3,2) 
m = "<span>"+string.substr(5,1)+"</span>"; 
sD = string.substr(6,2) 
s = "<span>"+string.substr(8,1)+"</span>"; 

finalString = hD + h + mD + m + sD + s; 

$('#string').html(finalString);

Sau đó, bạn có thể tạo kiểu cho các nhịp trong phạm vi #string bằng CSS.

#string{font-size:1.2em} 
#string > span{font-size:0.8em}

Đây là demo fiddle showing the above.

Nguồn

2013-04-14 00:23:28 dev

Điều này chỉ ném các chữ cái trong các nhịp và cung cấp cho chúng tất cả cùng một lớp.Có lẽ giá trị một đề cập đến danh dự lol :-)

jsFiddle

JavaScript:

var str = document.getElementById('string'), 
    chars = str.innerHTML.split(''); 

for (var i = 0; i < chars.length; i++) { 
    if (chars[i].match(/[hms]/)) { 
     chars[i] = "<span class='smaller'>" + chars[i] + "</span>"; 
    } 
} 
str.innerHTML = chars.join('');

HTML:

<body> 
    <span id="string">12h12m12s</span>   
</body>

CSS:

.smaller { 
    font-size: 10px; 
}

Nguồn

2013-04-14 01:05:20 orb

Thực ra, bạn có thể xóa toàn bộ vòng lặp và thay thế dòng cuối cùng bằng: – Patanjali

str.innerHTML = str.innerHTML.replace (/ ([hms])/gi, ' $ 1 '); – Patanjali

Sau đó, css sẽ trở thành: * # string span {font-size: 10px} – Patanjali

giải pháp đơn giản với CSS và gói mỗi nhân vật có một khoảng thời-tag:

#text span:nth-child(2) { 
    color: #ff00ff; 
} 

#text span:nth-child(5) { 
    color: #00ffff; 
} 

#text { 
    font-size: 20px; 
} 

<span id="text"><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></span>

https://jsfiddle.net/f8vffLj0/

Nguồn

2016-10-21 08:36:23 Borbo

Phong cách thư thứ n trong một khoảng thời sử dụng CSS

Trả lời

Các vấn đề liên quan