同一个页面放置两个同样的样式表（但是值不同），分别用于两个对象。如何避免冲突！！

上面打错了，是下面这段
文件 red.css
.my 
{
   color:red;
   border:1px solid #000000;
}
文件 blue.css
.my
{
   color:blue;
   border:1px solid #000000;
}
文件 text.html<html>
<body>
<link href='red.css'>
<span class=my>这里应该是红色字</span>
<link href='blue.css'>
<span class=my>这里应该是蓝色字</span>
</body>
</html>

解决方案 »

  1.   

    对于同一个.my，最先应用第一个引用的文件，第二个文件如果有不相同的属性才会被应用。所以，我建议用一个文件，定义
    .my_red
    {
       color:red;
       border:1px solid #000000;
    }.my_blue
    {
       color:blue;
       border:1px solid #000000;
    }
      

  2.   

    引入类似于命名空间的概念。
    文件 red.css
    .red_my 
    {
    color:red;
    border:1px solid #000000;
    }文件 blue.css
    .blue_my
    {
    color:blue;
    border:1px solid #000000;
    }文件 text.html<html>
    <body><link href='red.css'>
    <span class="red_my">这里应该是红色字</span>
    <link href='blue.css'>
    <span class="blue_my">这里应该是蓝色字</span>
    </body>
    </html>