一个 Html 页面内的两个 CSS 正文答案

【问题标题】：Two CSS bodies inside one Html page一个 Html 页面内的两个 CSS 正文
【发布时间】：2021-08-05 23:38:33
【问题描述】：

我想弄清楚如何在没有 HTML 页面的情况下使用两个正文。如果不可能，我还有什么其他选择？

header.ejs

<!DOCTYPE html>
<html lang="en">
<head>
.
.
<link rel="stylesheet" href="/css/Nav.css">
    <link rel="stylesheet" href="/css/logoLed.css">

</head>
<body>

navbar.ejs

.
.
  <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/events">Home</a>
        </li>
      
        <li class="nav-item">
          <a class="nav-link" href="/shops/productsView">SHOP</a>
        </li>
      </ul>
.
.

ledLogo.ejs

    <div class="box">
            <span class="glass"></span>
                    <div class="hexagonMain" style="background-color:DodgerBlue;" >
                        <div class="rowHexagon" >
                            <div class="hexagon"></div>
.
.

logoLed.css

.
.
body{
    display:  flex;
    flex-wrap: wrap;
    min-height: 100vh;
    background: #010615;
    font-family: 'Poppins', sans-serif;
}
.
.

导航.css

.
.
      body
        {
            float: right;
            justify-content: right;
            align-items: center;
            min-height: 30vh;
            background: #000;
            overflow: hidden;
        }
.
.

所以基本上， navbar.ejs 需要来自 Nav.css 的主体，而 ledLogo.ejs 需要来自 logoLed.css 的主体，我需要在同一页面上使用 navbar.ejs 和 ledLogo.ejs。

【问题讨论】：

标签： html css ejs

【解决方案1】：

浏览器并不关心如何它获取的 HTML 文档是如何生成的，因此您使用 EJS 的事实在很大程度上是无关紧要的。

浏览器获取一个带有一个 BODY 元素的 HTML 文档。（您可能有多个<body> 标签，但您不应该这样做，错误恢复规则会导致它们被合并/丢弃，直到您拥有一个为止）。

您的 CSS 可以根据需要使用选择器 body 包含任意多个规则集。它们都将按顺序应用（有关模式详细信息，请参阅The Cascade）。

如果你想定位两个不同的元素，那么它们不能同时定位<body>。您需要更改其中至少一个以针对不同的元素（例如 <div> 或 <main> 元素）。您可能需要创建一个新元素来定位。

【讨论】：