如何省略样式表以将样式应用于其他网页

Question

我正在制作一个消息转发器，例如来自此参考http://codepen.io/petebot/full/CpKzI的新消息通知对话框，我刚刚找到一个新的样式表，可以很好地查看消息对话。但是没有什么限制我只想使用这个样式表名称的这种控件样式：

<link id="Link2" href="../css/foundation.min.css" rel="stylesheet" type="text/css" target="_self"/>

如此。我正在使用web用户cotrol进行此用户控制，如下所示：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="notification.ascx.cs" Inherits="Staff_notification" %>
<link id="Link1" href="../css/notification.css" rel="stylesheet" type="text/css"/>
<link id="Link2" href="../css/foundation.min.css" rel="stylesheet" type="text/css" target="_self"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<div class="contain"><a href="#" class="notificationicon on" style="position:relative;text-decoration:none;">Messages&nbsp;<span class="noti_bubble1" runat="server" id="message_alert"><asp:Label ID="lbl_count_messages" runat="server"></asp:Label></span></a>
    <ul id="notificationMenu" class="notifications">
      <li class="titlebar">
        <span class="title">Messages</span>
        <span class="settings"><i class="icon-cog"></i>
        </span>
      </li>
      <div class="notifbox">
      <ul>
       <asp:Repeater ID="Repeater_Messages" runat="server">
       <ItemTemplate>
        <li class=" notif">
          <a href="Ticket.aspx?ticketid='<%#Eval("Ref_no")%>'&flag=0">
            <div class="imageblock">
             <asp:Image ID="userphoto" runat="server" CssClass="notifimage" ImageUrl = "../DisplayImage.ashx?userId='<%#Eval('UserId')%>"/>
            </div> 
            <div class="messageblock">
              <div class="message"><strong><%#Eval("Name")%></strong>:<br/><%#Eval("Message")%></div>
              <div class="messageinfo">
                <i class="icon-comment"></i><%# DataBinder.Eval(Container.DataItem,"CreatedDate","{0:ddd, dd MMMM yyyy}")%>&nbsp;at&nbsp;<%# DataBinder.Eval(Container.DataItem,"CreatedDate","{0:hh:mm tt}")%></div>
            </div>
          </a>
        </li>
       </ItemTemplate>
        </asp:Repeater>
        </ul>
      </div>
      <li class="seeall">
        <a href="javascript:void(0);" id="hpl_close">Close</a>
      </li>
    </ul>
  </div>

此样式表如何影响所有母版页。所以想要将此样式表省略到其他页面。只有这个用户控件才有此功能。所以为此我创建了Web用户控件。但它仍会影响所有网页。

这里我包括一个屏幕截图：

请帮帮我......

Answer 1

我很难理解你想要什么，但听起来你正试图让一个样式表只针对DOM中的一个元素，而不是样式表的工作方式。因此，您可以选择为DOM元素提供一个ID，然后将样式表的所有规则专门定位到该ID，如下所示：

<div id="thisBox" class="notifbox">

#thisBox { styles go here }

然而，在这种特殊情况下，您似乎正在尝试将Foundation框架用于您的一个设计。 Foundation是一个完整的框架，用于构建网站，我认为你最好滚动你自己的风格。