CSS class and id link styling not working
Question
I am self-taught in HTML and CSS, but one problem I have recently been running into is modifying links with CSS. I have done it in the past before, many times with no error, but now all the ways I can think of and that I find on the inte.net do nothing.
I have tried all of these ways, and none worked:
a.linkclass:link{text-decoration:none;}.linkclass a:link{text-decoration:none;} #linkid a:link{text-decoration:none;} a#linkid:link{text-decoration:none;}
My HTML and CSS are as follows(after looking over and over, I could find nothing wrong that could cause these problems)
body{ margin:0; background-color:eaf7ff; } #menubar{ max-height:10%; min-height:3% height:5%; background-color:BBBBBB; border-bottom:1px solid black; max-width:100%; min-width:100%; width:100%; float:left; position:fixed; display:inline-block } #pushbox{ max-height:10%; height:10%; background-color:black; max-width:100%; min-width:100%; width:100%; } #box1{ background-color:eaf7ff; } #tag1{ background-color:eaf7ff; margin:0; } #box2{ background-color:fff7ea; } #tag2{ background-color:eaf7ff; margin:0; } #box3{ background-color:eaf7ff; } #tag3{ background-color:eaf7ff; } #box4{ background-color:fff7ea; } #tag4{ background-color:eaf7ff; } #box5{ background-color:eaf7ff; } #tag5{ background-color:eaf7ff; } #copyright{ }.content{ max-width:100%; min-width:100%; width:100%; min-height:80%; height:85%; }.contenttag{ max-height:10%; height:10%; max-width:100%; min-width:100%; width:100%; } a.menulink{ border:1px solid black; background-color:red; } a:link { text-decoration: none; color:black; } a:visited { text-decoration: none; color:black; } a:hover { text-decoration: none; color:black; } a:active { text-decoration: none; color:black; }
<html> <head> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <;-- ==========MENUBAR==========--> <div id='menubar'> <h1> <a href='#tag1' class='menulink'>OPT1</a> <a href='#tag2' class='menulink'>OPT2</a> <a href='#tag3' class='menulink'>OPT3</a> <a href='#tag4' class='menulink'>OPT4</a> <a href='#tag5' class='menulink'>OPT5</a> </h1> </div> <?-- ==========CONTENTBOX1==========--> <div id='tag1' class='contenttag'></div> <div id='box1' class='content'> <h1>ContentBox1</h1> </div> <;-- ==========CONTENTBOX2==========--> <div id='tag2' class='contenttag'></div> <div id='box2' class='content'> <h1>ContentBox2</h1> </div> <?-- ==========CONTENTBOX3==========--> <div id='tag3' class='contenttag'></div> <div id='box3' class='content'> <h1>ContentBox3</h1> </div> <,-- ==========CONTENTBOX4==========--> <div id='tag4' class='contenttag'></div> <div id='box4' class='content'> <h1>ContentBox4</h1> </div> <!-- ==========CONTENTBOX5==========--> <div id='tag5' class='contenttag'></div> <div id='box5' class='content'> <h1>ContentBox5</h1> </div> <!-- ==========COPYRIGHT==========--> <div id='copyright'><center> copyright © Vladimir Plenskiy <?php echo date("Y"); ?>, Template by Timothy Leitzke </center> </div> </body> </html>
The 'a.menulink' by itself did not work. (Sorry if this is confusing, it is currently 12:14 AM and I have also been working on a project in Unity and some art on my computer for the past 24+ hours)
--edit--
for those who do not understand what my problem is, even though the format is right. The CSS styling using classes and ids does not work(the examples that I tried are all at the first CSS stylesheet. that style sheet is not one used on the page, as seen in the header, only ONE is used)
1 answers
solution1
-2 2015-08-07 07:20:28
According your HTML proper CSS for your links should be:
.menulink:link {text-decoration:none;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.