Question

我正在为我的所有页面使用单个CSS文件，但我遇到了这个问题。我在两个不同的页面上有一个几乎完全相同（有细微差别）的元素（让我们说主页和关于页面;这是我在主页中的特定元素的CSS代码，我想将它用于另一个页面差异很小。我如何命名这两个类，

我是否需要使用完全独立的类名，例如 .home.topcontainer {和 .about.topcontainer {等，或者是否有任何强大的方式处理这个问题？
如果我为整个网站使用单个CSS文件以避免让我对类名感到困惑，那么为不同页面命名CSS块的最佳方法是什么？

谢谢

CSS

.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;

Answer 1

最佳做法是在body标签中添加一些相关的类（正如你可以在几个CMS中看到的那样，如magento等），然后像这样使用：

<body class="home">
    <div class="top_container">
        <!-- Do something -->
    </div>
</body>

- 或 -

<body class="about">
    <div class="top_container">
        <!-- Do something -->
    </div>
</body>

现在你可以使用css：

.home .top_container{}

.about .top_container{}

Answer 2

我们假设这是您的主页

<div id="home">
  <div class="top_container">
     //stuff
  </div>
</div>

这是关于你的页面：

<div id="about">
  <div class="top_container top_container_about">
     //stuff
  </div>
</div>

现在，在CSS文件中，添加'top_container'类的样式，如下所示：

.top_container {
    //css styles common to the top_container element
}

然后在about部分中编写top_container独有的样式：

.top_container_about {
        //css style unique to the about section
    }

这是一种利用“级联样式表”的“级联”属性的方法。

Answer 3

这里常用的做法是使用基类和该基类的变体。这样我们就可以为两个元素使用基本的css-class，并通过使用variant-class覆盖一些值来稍微改变它。您没有指定您希望顶部容器如何更改，但这是一个示例：

＆＃13;

.top_container {
  background: #000;
  color: #fff;
  width: 200px;
  height: 50px;
  padding: 10px;
}

.top_container.top_container--narrow {
  width: 100px;
}

＆＃13;

<div class="top_container">
  Default
</div>
<div class="top_container top_container--narrow">
   Narrow
</div>

＆＃13;

Answer 4

我将页面名称添加到body类，并使用CSS（如

）进行更改

.style {
  margin: 0;
}

.home .style {
  margin: 10px;
}

Answer 5

从我在编写scss中学到的知识来看，最好让你的类名称为普通类。在css中你只能这样：

<强> CSS

.top-container{
 width: 100%;
}

.top-container.about{
width:60%
}

.top-container.contact{
width:30%
}

<强> HTML

home.html的

<div class="top-container"></div>

about.html

<div class="top-container about"></div>

contact.html

<div class="top-container contact"></div>

about类将覆盖top-container中的任何样式。所以它易于使用，简短而且非常简单。您可以使用它来使您的类名更通用。

Answer 6

如果两个页面上都有相同的元素，例如Header，那么您可以在两个页面上使用相同的类名，以便它们在两个页面上看起来完全相同。要对这些元素进行一些更改，您可以使用不同的CSS选择器。在下面给出的代码中，我使用了class和id作为选择器。

我希望这个答案能满足你的要求。

主页：标题背景颜色为蓝色。

    <header class="top_container" id="home_header">
      <!--YOUR WEBSITE HEADER-->
      <h1>TITLE</h1>
    </header>
    <div>
      <!--YOUR SITE CONTENT-->
    </div>

关于页面：标题背景颜色为红色

        <header class="top_container" id="about_header">
          <!--YOUR WEBSITE HEADER-->
          <h1>TITLE</h1>
        </header>
        <div>
          <!--YOUR SITE CONTENT-->
        </div>

CSS文件：

.top_container{
  background-color: blue;
  color: white;
}
#about_header{
  background-color: red;
}

Answer 7

我会这样。因为您需要在每个页面上设置一个<?php if (strlen($_POST['searchdisease'])) == 0) { // here i want the code to disable the select tag } ?>，就像＆＃34;默认＆＃34; .top-container的样式。所以CSS层叠样式表。从顶部级联，如果元素需要稍微不同，只需在更具体的定义类中设置差异。像这样：

.top-container

如何为不同的页面创建唯一的类名

7 个答案: