CSS是網頁設計中非常重要的一部分，使用CSS可以讓網頁呈現出更加美觀、可讀性更高的效果。而在編寫CSS時，如果能夠顯示代碼行號，不僅可以讓代碼更加清晰易讀，還可以方便進行代碼調試。下面介紹一種實現CSS顯示行號的方法。
首先，我們需要在HTML中加入一個pre標簽，用于顯示代碼。在pre標簽中，我們可以使用“
”標簽來包含代碼，并在pre標簽的class屬性中添加“line-numbers”類。
例如：下面是顯示代碼行號的例子：
body {
background-color: #fff;
}
h1 {
color: #f00;
font-size: 24px;
}
接下來，我們需要引入一個名為“prism.js”的JavaScript文件和一個名為“prism.css”的CSS文件。其中，prism.js文件用于實現代碼高亮效果，而prism.css文件則用于實現顯示行號的功能。
在引入文件后，我們可以在CSS文件中添加以下代碼：
.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
.line-numbers>.line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 3em;
font-size: 14px;
line-height: 1.4;
text-align: right;
border-right: 1px solid #ccc;
margin: 0;
padding: 0 0.3em;
color: #999;
}
.line-numbers-rows:before {
content: counter(linenumber);
counter-increment: linenumber;
}
/* override some defaults */
code[class*="language-"],
pre[class*="language-"] {
color: #000;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
tab-size: 4;
hyphens: none;
}
通過以上代碼，我們可以設置代碼框的外觀和行號的樣式，從而實現顯示行號的效果。
總的來說，使用CSS顯示行號可以讓代碼更加直觀易懂，并能夠方便地進行調試和定位錯誤。如果您是一名網頁設計師或者開發者，建議在編寫CSS時嘗試使用這種方法來優化您的代碼。上一篇css顯示點