如何爲不同的頁面創建同一個類名稱

我對所有頁面都使用單個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;

來源

2017-02-17 Manoj

使用不同的CSS文件 – Asad

您可以命名top_container2並用它作爲。約。 top_container2 –

@Asad，不建議將其作爲最佳做法 – Manoj

最好的做法是在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{}

來源

2017-02-17 07:00:10

假設這是您的主頁上

<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 
}

，然後寫這就是獨特的top_container樣式中有關部分：

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

這是利用「級聯樣式表」的「級聯」屬性的一種方式。

來源

2017-02-17 06:52:53 Aj334

這裏常用的做法是使用基類和該基類的變體。這樣我們對這兩個元素使用基本的css類，並通過用變體類覆蓋一些值來改變它。你沒有指定要如何頂部containter改變，但這裏有一個例子：

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

 
.top_container.top_container--narrow { 
 
    width: 100px; 
 
}

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

來源

2017-02-17 06:55:15 Esko

我會做像這樣。因爲在.top-container需要設置爲「默認」樣式的每個頁面上都可能有.top-container。所以CSS層疊樣式表。從頂層級聯，如果一個元素需要有點不同，只需將差異設置爲更具體的定義類。像這樣的東西：

.top-container { 
    /* apply all styles for .top-container */ 
} 

.home.top-container { 
    /* this .top-container will have all styles from .top-container defined above */ 
    /* so only define all DIFFERENT things for .home.top-container here */ 
} 

.about.top-container { 
    /* define all DIFFERENT things for .about.top-container here */ 
    /* like before it will always have the .top-container styles */ 
}

來源

2017-02-17 06:57:39 caramba

我添加的頁面名稱爲body類，並使用像CSS這樣的更改，如

.style { 
    margin: 0; 
} 

.home .style { 
    margin: 10px; 
}

來源

2017-02-17 07:00:48

從我在編碼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風格。所以它易於使用，簡短而且非常簡單。你可以使用它來使你的班級名稱更普遍。

來源

2017-02-17 07:18:44 user3771102

如果兩個頁面上都有相同的元素，例如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文件：用於invidual頁

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

來源

2017-02-17 08:09:50 Pratik

如何爲不同的頁面創建同一個類名稱

回答

相關問題