开发者

CSS .class a {} not working

开发者 https://www.devze.com 2023-03-19 05:36 出处:网络
This algorithm just stopped working on my page (it had worked for over a year as it was): <div class=\"classA\" id=\"specific1\">

This algorithm just stopped working on my page (it had worked for over a year as it was):

<div class="classA" id="specific1">
    <a href="#">Link Text</a>
</div>

.classA a {
    style: actual style;
}

The a tag no longer picks up the style in the css. Now in order for my a tags to pick up the style I have to give them a class specifically and this works:

<div class="classA" id="specific1">
    <a class="classB" href="#">Link Text</a>
</div>

Did something change recently in IE7 or FireFox4 that would break the first algorithm? I'd prefer to fix the css rather than inserting a class onto all of the relevant a tags on several pages.

Edit to show better the actual styling:

This no longer works (links have vanilla 100%-blue-underline styling) but had been working for quite some time. Note that it was first designed for IE6, survived the switch to IE7, but has subsequently stopped picking up its style. Hopefully this helps all of you who have graciously tried to answer!

-- HTML --
<div class="ovalButton" id="oval1"><a href="#">LinkText</a></div>       

-- CSS --
* {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: verdana, arial, sans-serif;
}

.ovalButton {
    position: absolute;
    开发者_如何学Cwidth: 150px;
    height: 60px;
}

.ovalbutton a {
    background: url("logo_butn.gif") no-repeat;
    display: block;
    color: #0063B5;
    width: 150px;
    height: 60px;
    overflow: hidden;
    font-size: 80%;
    font-weight: bold;
    text-decoration: none;
    padding: 16px 15px 20px 0;
    text-align: center;
}

.ovalbutton a:Hover { background: url("logo_butn_highlight.gif") no-repeat; }

#oval1 { top: 12px; left: 300px; }
#oval1 a { padding-top: 25px; }

When I copy the exact styling from .ovalbutton a {} to a separate class and apply that class to the link in the html, it works fine.


The problem is here:

.ovalbutton a {

The capitalization does not match:

<div class="ovalButton" 

You can change your CSS selector to .ovalButton a to fix this problem.


Not knowing your full CSS, I can't say for sure, but it sounds likely that you are running into a CSS specificity issue.


The issue with your code as entered in your question is that the capitilisation on the class and CSS selector is different

ovalbutton vs ovalButton

you can see this corrected and working at http://jsfiddle.net/5aKKR/1/ (no background images)


It works for me, are you sure that the CSS selector, .classA a, is the problem? JsFiddle Demo


Nothing has changed in this respect and your selector should work.

Try to reproduce your problem on separate page and you will see.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号