Question

基本上我有一个HTML页面，标题中包含一系列javascripts和css文件，就像往常一样

<link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" />

我正在使网站移动兼容，并获得了一些在线资源来实现这一目标。但是使用此代码我需要链接到另一个css文件“apps.css”。当我加载我的网站时，apps.css和原始的main.css文件相互冲突并导致各种问题。由于两个css文件都非常大，我想知道是否可以仅引用一个代码块来仅获取其中一个css文件。

例如：

我想要这段HTML

<div>
<nav id="topMenu" role="navigation">
        <ul id="nav" class="nav-bar">
            <li><a href="@Url.Action("Index", "Home")">Pending Entries</a></li>
            <li><a href="@Url.Action("MyStores", "Home")">My Stores</a></li>
            <li><a href="@Url.Action("Upload", "Home")">Create New Entry</a></li>
            <li><a href="@Url.Action("MyEntries", "Home")">My Entries</a></li>
            <li><a href="@Url.Action("Index", "ImageGallery")">Gallery</a></li>
            <li><a href="@Url.Action("Logout", "Home")">Logout</a></li>
        </ul>
    </nav>
</div>

只读这个css文件

<link href="@Url.Content("~/Content/css/app.css")" rel="stylesheet" type="text/css" />

并忽略其他main.css文件，而我的其余HTML读取原始的main.css忽略apps.css

Answer 1

要让apps.css仅应用于您的代码块，您应该选择要应用于HTML块的类，为该类创建“CSS重置”规则，并在apps.css中使用相同的前缀类。您应该包含两个css文件，但要确保apps.css位于main.css之后。

这只需要您更改apps.css，您可以按原样保留main.css。必须在main.css之后包含apps.css，以便它可以覆盖使用.apps类的元素内部的所有内容的main.css规则。

在这种情况下，您可以将应用类应用于div。

<div class="apps">
<nav id="topMenu" role="navigation">
        <ul id="nav" class="nav-bar">
            <li><a href="@Url.Action("Index", "Home")">Pending Entries</a></li>
            <li><a href="@Url.Action("MyStores", "Home")">My Stores</a></li>
            <li><a href="@Url.Action("Upload", "Home")">Create New Entry</a></li>
            <li><a href="@Url.Action("MyEntries", "Home")">My Entries</a></li>
            <li><a href="@Url.Action("Index", "ImageGallery")">Gallery</a></li>
            <li><a href="@Url.Action("Logout", "Home")">Logout</a></li>
        </ul>
    </nav>
</div>

在apps.css中，每个规则都需要以“.apps”作为前缀。此外，应将“CSS重置”样式规则放在apps.css的顶部以否定main.css的效果。

.apps *
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.apps table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 2

媒体查询是一种选择，但听起来更像是需要查看CSS的基础知识并修改它。两个文件都非常大的事实是另一个红旗。如果您只需要一些列表样式，为什么不加载那个位？

由于您只希望#topMenu使用apps.css，因此您可以使用#topMenu添加该文件中的每个语句。

Answer 3

正如我所说的isherwood，你无法隐藏一个CSS，你可以做的是在你想要使用那个css时个性化一个部分div

在同一HTML页面中分隔两个CSS工作表

3 个答案: