Overridding a:link_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-24 09:40 出处：网络

In my main CSS file, I have my a:link selector set to display links in White. a:link{ color: white; } However, I want links in another DIV 开发者_JS百科(.menuItem) to be black.

相关专题：css

In my main CSS file, I have my a:link selector set to display links in White.

a:link{
color: white;
}

However, I want links in another DIV 开发者_JS百科(.menuItem) to be black.

I am trying

.menuItem a:link{
color: black;
}

can't seem to get it to work, so it's probably wrong..

Can anyone lend a hand on this one?

.menuItem a:link{
color: black !important;
}

With respect to Chacha102, I don't think the solution is ideal. !important is a kludge, and a better way to handle this would be to make use of the document structure to add some specificity. Assuming your .menuItem elements have a common parent, perhaps a div with an id of menu, you could revise your menu-specific link style as follows:

#menu a:link {
    color: black;
}

The extra specificity should cause the more specific rule to take effect for those menu items.

Working on a sample code now. But Is your div tag having an Id of menuItem or a class of menuItem? This is my guess.

Edited : Okay, now I see. If you separate the css to another file and use a link tag to import it in, then it should be fine without using the !important command, see this :

body {background-color : green;}

a:link{ color : white;}

.menuItem a:link
{
color : black;
}

And this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test page</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div>
    <a href="#">This is a link</a>
</div>
<div class="menuItem">
    <a href="#">This is a link in div menuItem</a>
</div>
</body>
</html>

Hope this helps:)

Still, if I embed the css snippet into the html, then it doesn't work... Wondering why?