Google Chrome CSS class pseudo-class group not working

Question

I'm not sure if this is really a bug with Google Chrome, but here is what happens:

When I nest the pseudo-class a:link , a:visited in a class, all <a> elements in the page will get the latest color set in the nesting. It only happens with the color property. In other browser it does not happen, I'm using Google Chrome 30.0.1599.69 m

CSS:

.cat ul{
    list-style-type:none;
    margin-top:10px;
    padding-left:10px;
}

.cat a:link, a:visited {
    margin-top: 3px;
    font:15px arial,sans-serif;
    display:block;
    color:#000000;
    text-align:left;
    text-decoration:none;
}

.cat a:hover,a:active {
    background-color: #eeeeee;
}



.menu ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.menu li {
    float:left;
}

.menu a:link,a:visited {
height:35px;
padding-top:8px;
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#2d0000;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
}

.menu a:hover,a:active {
    background-color:#7A991A;
}

HTML:

<html>
<head>
<title>TITLE</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<body>
<div id="wrapper">
    <div id="site">

            <div id="header">
                <div id="logo"><img src="./img/logo.png" /></div>
                <div id="cart"></div>
            </div>
            <div id="subheader">
                <div id="menu" class="menu">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#news">News</a></li>
                    </ul>
                </div>
                <div id="searchbar">
                    <form>
                        <input type="text" name="search" /> <input type="submit" name="ok" value="Search" />
                    </form>
                </div>
            </div>
        <div id="body">
            <div id="category" class="cat">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </div>
            <div id="main">
                <a>Test</a>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</div>
</body>
</html>

Answer 1

Here you set .cat a:link and all a:visited to black color - all a in .cat and all a in hole css a:visited are set to black..

.cat a:link, a:visited {
    .....
}

Here you set .menu a:link and a:visited to white. So all a:visited will be white... Not only in .menu...

.menu a:link,a:visited {
.....
}

I think you have mistake in .cat a:link, a:visited - it should be .cat a:link, .cat a:visited . Same mistake in .menu a:link, a:visited - this should be .menu a:link, .menu a:visited

Google Chrome CSS class pseudo-class group not working

Question

1 answers

solution1
0 ACCPTED 2013-10-14 08:41:04

Google Chrome CSS class pseudo-class group not working

Question

1 answers

solution1 0 ACCPTED 2013-10-14 08:41:04

solution1
0 ACCPTED 2013-10-14 08:41:04