删除继承的样式答案

【问题标题】：Remove inherited styles删除继承的样式
【发布时间】：2023-03-20 22:06:01
【问题描述】：

让我做一个小序言。所以我正在处理的网站，大约一半响应一半没有。现在我正在尝试制作一个适用于非响应页面的响应式登录。当我测试它时一切都很好，但无论出于何种原因，都有一个样式表针对 divs/p/ 几乎所有内容并覆盖我的样式 （注意：过度骑行的 css 是与类无关，而是针对文档部分 (div/p/span/etc))。我的问题是，如何防止将这些样式应用于文档部分？更具体地说，我不希望将这些部分样式应用于 login-container div 中的任何位置。

<div id="login-container" class="container content">
<div class="row">
    <div class="col-xs-12 login-header">
        Log In
    </div>
</div>
<div class="container login-form">
    <div id="loginform" runat="server">
        <p style="color: Red;">
            <asp:Label ID="lblMessage" runat="server"/>
        </p>
        <fieldset id="formLogin" runat="server">

            <div class="col-xs-12 login-row">
                <div class="col-xs-12 login-label">
                    <asp:Label runat="server" ID="lblUsername" AssociatedControlID="txtUsername" EnableViewState="False">Username</asp:Label>
                </div>
                <div class="col-xs-12 login-row">
                    <asp:TextBox ID="txtUsername" CssClass="login-textbox" Height="36" placeholder="   &#xf007;" runat="server"/>
                </div>
                <div class="col-xs-12 login-label">
                    <asp:Label runat="server" ID="lblPassword" AssociatedControlID="txtPassword" EnableViewState="False">Password</asp:Label>
                </div>
                <div class="col-xs-12 login-row">
                    <asp:TextBox ID="txtPassword" TextMode="Password" CssClass="login-textbox" Height="36" placeholder="   &#xf084;" runat="server"/>
                </div>
            </div>
        </fieldset>
        <div class="col-xs-12 login-row">
            <asp:Button ID="btnGo" runat="server" Text="Login" CssClass="btn btn-blue"/>
        </div>
        <%--Value of Request.QueryString["ContestantNumber"] (but really "item"): <%= QueryTest %>--%>
    </div>
</div>

但是当我在浏览器中检查时，会发生这种情况over riding css

有什么建议吗？有没有办法使用 jquery 只保留类定义的样式？

【问题讨论】：

了解样式特异性。这就是你的全部问题：css-tricks.com/specifics-on-css-specificity 你需要#legacy-wrapper .login-header {... your styles here ... }
谢谢！虽然有点乏味，但我认为您的建议是最好的解决方案。
我很乐意提供帮助。随着时间的推移，这样的事情会帮助你成为一个更好的编码人员——在不得不做这样的事情之后，你会尽可能地学习编写不太具体的 CSS。 SCSS 和 LESS 之类的工具也让这变得不那么乏味（但最终会创建同样大的 css）

标签： javascript jquery html css asp.net

【解决方案1】：

有一种被称为重置 CSS 的东西，它重置所有继承的样式，之后，您可以应用自己的自定义样式。另外，根据您的要求规范化做一些类似的事情

这是网址
重置 CSS https://meyerweb.com/eric/tools/css/reset/

规范化 CSS https://necolas.github.io/normalize.css/

【讨论】：

【解决方案2】：

要么使用第三方 CSS，要么不使用。如果您想将特定类下的 CSS 类列入黑名单，您可以这样做

.yourClass .aClass, .yourClass .anotherClass {}

或者您修改被覆盖的类以按照您的意愿工作。两者对我来说都显得多余。

如果需要覆盖，那么我不明白您为什么不在登录范围内创建自己的结构。借用您喜欢的功能并自己实现其余功能，但如果您偏离太多，那么可能是时候重新考虑页面的总体样式了。

【讨论】：

继续结合您和cal b 的建议。谢谢。