css如何进行高亮显示

CSS是前端开发中的重要一环，它可以使网页更美观、更易读，也可以进行高亮显示。那么，如何利用CSS实现高亮效果呢？ 通常情况下，CSS中的高亮就是指对某一片区域进行颜色或者背景的加强。在HTML中，我们可以利用pre标签将代码块包含起来。因此，我们可以利用伪类选择器对pre标签进行样式设置，从而实现高亮效果。 具体地，我们可以通过以下代码来设置高亮效果： ```CSS pre { position: relative; padding: 10px; background: #f7f7f7; color: #444; font-size: 14px; border: 1px solid #ddd; line-height: 1.4; overflow: auto; } pre:hover::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(221,221,255,0.2); z-index: -1; } ``` 通过上述代码，我们可以实现以下的高亮效果：  可以看到，代码块的背景色被设置为了#f7f7f7，字体颜色为#444，同时我们还设置了一些padding、边框等样式。 但是，我们可能希望特定的行或者特定的单词能够更加醒目地显示。这时就需要用到CSS中的强调样式，即em标签。我们可以将需要设置为高亮的部分用em标签包裹起来，并设置好对应的样式，从而实现对特定部分的高亮效果。 ```CSS pre em { color: red; font-weight: bold; } ``` 通过上述代码，我们将em标签中的字体颜色设置为红色，加粗字体，从而达到了对特定部分的高亮效果。 总的来说，CSS中的高亮效果主要是通过样式的设置来实现的。通过设置pre标签和相关的样式，我们可以实现对整个代码块的高亮效果，而通过在特定位置加上em标签，我们可以实现对特定部分的高亮效果。