Links not taking to class
for some reason my links aren't conforming to my class. What's going on?
.greyBoxTxt {
font-family:Verdana, Arial, Helvetica, san开发者_Go百科s-serif;
font-size:11px;
color:#7b7d7e;
}
a.greyBoxTxt {
color:#0164a5;
text-decoration:none;
}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" valign="top" class="greyBoxTxt">
<b>Business Banking</b><br />
<a href="#">eBusiness Checking</a><br />
<a href="#">Business Checking</a><br />
<a href="#">Commercial Checking</a><br />
<a href="#">Non-Profit Checking</a><br />
<a href="#">Business Savings</a><br />
<a href="#">More...
</a></td>
<td width="25%" valign="top"> </td> <td width="25%" valign="top"> </td>
<td width="25%" valign="top"> </td>
</tr>
</table>
I guess what you're trying to do is more this
.greyBoxTxt {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#7b7d7e;
}
.greyBoxTxt a {
color:#0164a5;
text-decoration:none;
}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" valign="top" class="greyBoxTxt">
<b>Business Banking</b><br />
<a href="#">eBusiness Checking</a><br />
<a href="#">Business Checking</a><br />
<a href="#">Commercial Checking</a><br />
<a href="#">Non-Profit Checking</a><br />
<a href="#">Business Savings</a><br />
<a href="#">More...
</a></td>
<td width="25%" valign="top"> </td> <td width="25%" valign="top"> </td>
<td width="25%" valign="top"> </td>
</tr>
</table>
The selector a.greyBoxTxt would select something like this, Commercial Checking
Your selectors are wrong: a.greyBoxTxt
targets anchor elements with the classname greyBoxTxt
. Something like thie:
<a class="greyBoxTxt" href="#">Lorem</a>
What you want is an anchor element which is a descendant of an element with classname greyBoxTxt
:
.greyBoxTxt a {
/* ... */
}
Note that in this new selector, the space between the .greyBoxTxt
and the a
is actually the descendant combinator.
精彩评论