Question

有没有有效的方法来扫描css文件中的id & class名称？我的网络应用程序中有很多css文件，现在我必须添加更多的css文件。我常常被困在定义ID＆amp;已在另一个css文件中定义的类名，它会在测试期间导致问题。我真的厌倦了不断改变id＆amp;班级名称。有人可以给我任何提示来解决它。

@Edit：假设网络应用old_1.css & old_2.css

中有两个css文件

old_1.css  #id_1 {width:100%;height:100%; ....  }
          #id_2 { width:50%; height:50%; .... }  

old_2.css   #id_3 {width:70%;height:70%; ....  }
          #id_4 { width:30%; height:30%; .... }

现在我正在创建一个新的css文件new_1.css，而我错误地写了旧css文件的simmilar id。这是我卡住的地方，我想避免重写相同的ID。

new_1.css  #id_1 {width:80%;height:80%; ....  } // this id is already declared in old css file

Answer 1

不要确保每个CSS类名都是唯一的，而是确保CSS样式不会因CSS中包含父元素而发生冲突。这对结构来说更好：

HTML：

<div class="section1">
    <div class="inner_div">

    </div>
</div>
<div class="section2">
    <div class="inner_div">

    </div>
</div>

CSS：

.section1 {

}
    .section1 .inner_div {
         color:red;
    }

.section2 {

}
    .section2 .inner_div {
         color:blue;
    }

这将确保只有div类的inner_div将被赋予样式color:red，其中div类包含section1类div }。同样，只有inner_div color:blue的{{1}}样式为div，其中section2包含.main_container .news .article .details span.date {}类。

使用此格式可以防止您拥有重复的类名，因为您可以根据需要定义，例如，如果我将样式应用于显示我使用的新闻文章的日期的span标记：< / p>

.news_article_date {}

这更易于阅读，并且复制的可能性要小得多：

{{1}}

否则，就像@Ant所说的那样，使用一个好的HTML编辑器软件，并对使用的类和ID进行查找。

Answer 2

如果重构旧的CSS文件超出了当前的工作范围，您可以通过使选择器更具体来覆盖旧样式。关于CSS特异性的一个很好的教程给出了here

如何避免css文件中的ID名称

2 个答案: