在CSS中使用JavaScript判断浏览器版本（以下简称检测浏览器版本）一般有两种方式，分别是：
-
使用JavaScript检测浏览器版本，然后将检测结果作为类名添加到HTML标签上，再使用CSS选择器进行样式控制；
-
在CSS中使用Hack方法，通过CSS语法对不同浏览器进行识别，并针对性地写出不同浏览器的样式。
下面详细介绍一下这两种方法的实现步骤和示例说明。
方法一：检测浏览器版本，作为类名添加到HTML标签上
1. JavaScript代码实现
JavaScript代码如下：
// 检测IE浏览器版本
function isIE() {
let ua = navigator.userAgent;
return /MSIE/.test(ua) || /Trident/.test(ua);
}
// 添加类名到HTML标签
if (isIE()) {
document.documentElement.classList.add('is-ie');
} else {
document.documentElement.classList.add('is-not-ie');
}
2. CSS样式实现
为了兼容一些IE浏览器的版本，我们需要写一些针对性的CSS样式。
/* 针对IE 6 */
.is-ie .box {
background: red;
}
/* 针对IE 7 */
.is-ie .box {
background: blue;
}
/* 针对非IE浏览器 */
.is-not-ie .box {
background: green;
}
上述代码中，我们用JavaScript检测浏览器版本，然后将检测结果（is-ie和is-not-ie）添加到HTML标签中，最后使用CSS选择器控制不同浏览器下的样式。
3. 示例说明
假设我们有一个页面，需要在不同的浏览器下显示不同的背景颜色。如果是IE浏览器，背景颜色分别为红色和蓝色，如果是非IE浏览器，则为绿色。页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中判断浏览器版本的示例</title>
<style>
.box {
width: 200px;
height: 200px;
}
/* 针对IE 6 */
.is-ie .box {
background: red;
}
/* 针对IE 7 */
.is-ie .box {
background: blue;
}
/* 针对非IE浏览器 */
.is-not-ie .box {
background: green;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 检测IE浏览器版本
function isIE() {
let ua = navigator.userAgent;
return /MSIE/.test(ua) || /Trident/.test(ua);
}
// 添加类名到HTML标签
if (isIE()) {
document.documentElement.classList.add('is-ie');
} else {
document.documentElement.classList.add('is-not-ie');
}
</script>
</body>
</html>
在上述示例代码中，我们先定义了三种不同浏览器下的背景颜色样式，然后在JS中检测浏览器版本，并将检测结果作为类名添加到HTML标签上，最终在页面中显示出不同浏览器下的不同背景颜色。
方法二：使用CSS Hack方法
CSS Hack方法是在CSS代码中针对不同的浏览器进行样式处理。下面给出两个针对不同Webkit内核浏览器和IE浏览器的Hack方式示例。
1. 针对Webkit内核浏览器
在CSS中，我们使用Hack语法来针对不同的Webkit内核浏览器进行样式处理。例如：
/* Chrome和Safari浏览器 */
@media screen and (-webkit-min-device-pixel-ratio:0){
/* Webkit浏览器专用区 */
}
上述代码中，我们使用了@media查询来针对Webkit内核浏览器进行样式的处理，其中@media screen表示屏幕类型的媒体查询，-webkit-min-device-pixel-ratio表示设备的像素密度，0则表示不进行缩放。这样我们就可以在Hack语法中定义针对Webkit内核浏览器的专用样式。
2. 针对IE浏览器
在CSS中，我们也可以使用Hack语法来针对不同IE浏览器进行样式处理。例如：
/* 针对所有版本的IE浏览器 */
.box {
background-color: blue\9;
}
/* 针对IE 7及以下版本浏览器 */
.box {
*background-color: yellow;
}
/* 针对IE 6及以下版本浏览器 */
.box {
_background-color: green;
}
上述代码中，我们使用了不同的Hack语法来针对不同版本的IE浏览器进行样式处理，例如在IE6下使用了_作为前缀，而在IE7下则使用了*作为前缀等。这样我们就可以在Hack语法中定义针对不同IE浏览器版本的专用样式。
3. 示例说明
以下是一个基础的示例，当用户浏览器是IE浏览器时，字体变红色：
<!DOCTYPE html>
<html>
<head>
<title>使用Hack方法判断浏览器版本</title>
<style>
/* 针对IE 6及以下版本浏览器 */
* html body {
font-size: 100%;
color: red;
}
/* 针对IE 7浏览器 */
*:first-child+html body{
font-size: 100%;
color: red;
}
/* 针对FF、IE8、Opera、Safari及Chrome浏览器 */
html>body {
font-size: 100%;
color: black;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
上述代码中使用了 html、:first-child+html、html>body等针对性的Hack方式来实现对不同浏览器的样式处理。
综上所述，以上是CSS中使用JavaScript判断浏览器版本的攻略和示例说明，您可以根据实际需求选择适合自己的方法。