删除继承的样式

问题描述:

让我给一点前言。所以我正在研究的网站大约有一半的响应不是。现在我正在尝试创建一个响应式登录,它将适用于非响应式页面。当我测试它是一切都很好,但无论什么原因,有一个样式表,目标divs/p/几乎所有和骑我的风格(注意:骑在css是不是类相关的,而是目标文件部分(div/p/span/etc)。我的问题是,如何防止将这些样式应用于文档部分?更具体地说,我不希望这些款式适用于登录容器 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只保留类定义的样式?

+1

了解风格特异。这是你的整个问题:https://css-tricks.com/specifics-on-css-specificity/你需要'#legacy-wrapper .login-header {...你的风格在这里...} –

+0

谢谢!虽然这有点乏味,但我认为你的建议是最好的解决方案。 –

+0

我很乐意提供帮助。像这样的事情可以帮助你随着时间的推移成为一个更好的编码器 - 在完成这样的事情之后,如果可能的话,你会学会编写较不具体的CSS。像SCSS和LESS这样的工具也使得这个工作不那么繁琐(但最终创建了同样大的css) –

要么使用第三方CSS,要么不使用。如果你想黑名单在特定类的CSS类,你可以通过

.yourClass .aClass, .yourClass .anotherClass {} 

这样做,或者你修改被覆盖的类然而,工作,你想让它。这两者对我来说似乎相当多余。

如果覆盖是必要的,那么我不明白为什么你只是不在登录范围内创建自己的结构。借用您喜欢的功能并自行实施其他功能,但如果偏差太大,那么现在可能是时候重新考虑页面的一般样式了。

+0

提前并结合了你的和计划b的建议。谢谢。 –

有一些已知的重置CSS可重置所有继承的样式,然后您可以应用自己的自定义样式。 还,规范做你的要求

这里类似的一些事情很是URL
复位CSS https://meyerweb.com/eric/tools/css/reset/

正常化CSS https://necolas.github.io/normalize.css/