当前位置：首页 → 问答吧 → text-decoration去除下划线的问题

text-decoration去除下划线的问题

时间：2011-07-17

来源：互联网

按CSS优先级规则，第二行应该不会有下划线才是。
请问在不改变.sub的情况下应该如何定义.none才能去除下划线呢？

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.sub{
    text-decoration:underline;
}
.sub .none{
    text-decoration:none;
}
</style>
</head>
<body>
<div class="sub">
  这里有下划线
    <div class="none">正常下这里应该没有下划线</div>
</div>
</body>
</html>

作者: rainzero 发布时间: 2011-07-17

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.sub{
    text-decoration:underline;
}
.none {
    text-decoration:none;
    color:red;
}
</style>
</head>
<body>
<div>
    <div class="sub">
      这里有下划线
    </div>
    <div class="none">正常下这里应该没有下划线</div>
</div>
</body>
</html>