div内的css标题

Question

New to css. I have a div element, in which there are multiple links in it, now I like to apply css to all of the elements inside the div like below:

#menu {
    top: 150px;
    left: 650px;
    position: absolute;
    color: #151B54;
    font: 10pt;
    font-family: Arial;
}

However this doesn't seem to be working.

Here is the div:

    <div id="menu">
        <asp:HyperLink ID="lnk_Home" runat="server"  
        NavigateUrl="~/Default.aspx">  Home  </asp:HyperLink>
    </span>
    &nbsp;&nbsp;<asp:HyperLink ID="HyperLink14" runat="server" NavigateUrl="~/About/About.aspx" 
    Target="_blank">  About  </asp:HyperLink>
&nbsp;
<asp:HyperLink ID="HyperLink16" runat="server" 
    NavigateUrl="~/About/ContactUs.aspx" Target="_blank">  Contact Us  </asp:HyperLink>
<asp:HyperLink ID="HyperLink17" runat="server" 
    NavigateUrl="~/About/FAQ.aspx" Target="_blank">  FAQ  </asp:HyperLink>
    </div>

Answer 1

None of your CSS styles anything inside of the #menu div.The right way would be like this:

div#menu {
    position: absolute;
    top: 150px;
    left: 650px;
}

/* "<asp>" isn't a valid HTML element, but I assume that
 * <asp:Hyperlink> actually generates an HTML anchor */

/* Links also have pseudo-elements that represent their
 * valid statuses.*/
div#menu a,
div#menu a:visited,
div#menu a:hover,
div#menu a:active,
div#menu a:focus {
    color: #151B54;
    font: 10pt;
    font-family: Arial;
}

More information about the pseudo-classes mentioned can be found here: http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

Answer 2

I think you are looking for something like

#menu asp {
  ...styles...
}

This will target all <asp> tags inside the #menu element. Your current style only targets the #menu element, not any of its children.

(Although the <asp> tag is non-valid, you could substitute any type of element and the concept still applies.)

---

Also, there's a rogue <span> element in your code, and a lot of   where CSS can do the job. It should maybe look like this:

<div id="menu">
  <asp:HyperLink ID="lnk_Home" runat="server" NavigateUrl="~/Default.aspx">
    Home</asp:HyperLink>

  <asp:HyperLink ID="HyperLink14" runat="server" NavigateUrl="~/About/About.aspx" Target="_blank">  
    About</asp:HyperLink>

  <asp:HyperLink ID="HyperLink16" runat="server" NavigateUrl="~/About/ContactUs.aspx" Target="_blank">  
    Contact Us</asp:HyperLink>

  <asp:HyperLink ID="HyperLink17" runat="server" NavigateUrl="~/About/FAQ.aspx" Target="_blank">
    FAQ</asp:HyperLink>
</div>

Answer 3

Not exactly sure what you're asking, as you provided ASP.NET code, but to select elements inside of elements via CSS, you can do it like this:

#menu your_link {
  /* Styles */
}

If you could provide the generated HTML, that would be nice.