在網頁開發中，有時需要對用戶輸入的文本進行字數限制，以確保排版的整齊美觀。而這樣的限制可以通過CSS樣式來完成。

典型的應用場景是在輸入框中，限制用戶輸入的字數。我們可以通過CSS的:nth-child()偽類，結合::before或::after偽元素，以及content屬性來實現。

.limit-input input:nth-child(1):not(:focus)+span::after {
content: "7/10";
font-size: 12px;
color: #ccc;
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 15px;
margin-right: 20px;
}
.limit-input input:nth-child(1):not(:focus)+span::before {
content: "";
display: none;
}
.limit-input input:focus:nth-child(1)+span::before {
content: "請輸入您的留言";
font-size: 12px;
color: #ddd;
position: absolute;
top: 15px;
left: 0;
margin-left: 14px;
}

這段代碼通過:nth-child()偽類來選中第一個輸入框，對于非焦點狀態下的輸入框后面的元素添加字數統計信息。同時，在元素前添加::before偽元素，通過添加"請輸入您的留言"文字來提醒用戶輸入。

可以發現，在這個樣式中，字數限制是由JS實現的，因此，我們需要在JS代碼中獲取輸入框中的字數進行限制。CSS的樣式則用來實現UI效果。