\'+layout.svelte\' 之外的 CSS 适用于其组件答案

【问题标题】：CSS outside of '+layout.svelte' applies to its components\'+layout.svelte\' 之外的 CSS 适用于其组件
【发布时间】：2023-02-16 23:18:45
【问题描述】：

目前正在从事我的第一个 SvelteKit 项目。我创建了一个“+layout.svelte”文件，它使用我的 lib 文件夹中的导航栏和页脚组件。当我向页面添加内容时，它当前与导航栏重叠。

+layout.svelte

<script>
    import Nav from "$lib/nav.svelte";
    import Footer from "$lib/footer.svelte"
</script>

<body>
    <Nav />
    <Footer />
</body>

<slot></slot>

<style>
    body {
        margin: 0;
    }
</style>

nav.svelte

<script>
    const nav = [
        { title: "Home", path: "/" },
        { title: "Products", path: "/products"},
        { title: "News", path: "/news"},
    ]
</script>

<nav>
    <ul>
        {#each nav as item}
            <li><a href={item.path}>{item.title}</a></li>
        {/each}
    </ul>
</nav>

<style>
    nav {
        position: fixed;
        width: 100%;
        padding-bottom: 0.01%;
        box-shadow: 0 1px 1px -1px black;
    }

    ul {
        list-style: none;
        text-align: center;
        padding-left: 0;
    }

    li {
        display: inline-block;
        margin-right: 2em;
        font-weight: bold;
    }
</style>

影响 +layout.svelte 的“+page.svelte”

<script>
    import products from "..\\products.json";
</script>

<table id="productSearchResult">
    <thead>
        <tr>
            <th></th>
            <th>Product ID</th>
            <th>Supplier ID</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        {#each products as product}
            <tr>
                <td><img src="product.jpg" alt="product"></td>
                <td>{product.productId}</td>
                <td>{product.supplierId}</td>
                <td>{product.statusId}</td>
            </tr>
        {/each}
    </tbody>
</table>

<style>
    #productSearchResult {
        text-align: center;

        /* This also affects the navbar */
        margin-top: 5%;

        padding: 10px;
        border: 1px solid #bebebe;
        box-shadow: 
            15px 15px 30px #bebebe,
            -15px -15px 30px #ffffff;
    }

    #productSearchResult img {
        width: 50px;
    }

</style>

当我尝试将 margin-top 添加到 html 表以使其显示在导航栏下方时，导航栏也会受到影响。该表位于另一条路线的“+page.svelte”内。据我了解，“+page.svelte”中的 css 应该只适用于当前文件。我究竟做错了什么？

【问题讨论】：

标签： css margin nav sveltekit

【解决方案1】：

这不是影响其他元素的 CSS，您将 nav 元素设置为 position: fixed，因此无论其他情况如何，它都会留在视口的那个位置。如果不需要，请使用不同的放置机制。

（另外，不要添加 body 元素，应该只有一个，并且应该在 app.html 文件中。）

【讨论】：