为什么这个表格单元格没有应用正确的类?

时间:2011-02-07 17:10:20

标签: css css-selectors

我有一个HTML页面(PHP,真的),其中包含一个包含图形的表格单元格,并且有两个背景图形(一个重复渐变,一个右对齐)。它有一个包含样式列表的第二个表格单元格。因为我需要使用PHP来评估图像路径,所以我需要在HTML中定义某些样式,而不是在单独的.css文件中。任何人都可以帮助我解释为什么样式正确应用于li元素,而不是带有class logoHeader的表格单元格? (li.white在链接的css文件中定义,因为它不需要任何用于路径评估的php。)我是服务器端程序员,虽然我可以做基本的CSS但我没有最大的把握继承规则。

这是渲染的来源:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
 <base href="http://mysite.com/mobile" /> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 <title>Home</title> 

 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
 <link rel="stylesheet" href="/templates/mobile/css/editor_content.css" type="text/css" />
 <style>
  <!-- need to define these styles here because we can't use php in the css - it doesn't evaluate -->

  td.logoHeader {
   background: url(/images/mobile/transparentLeavesRight.png) top right no-repeat,  
               url(/images/mobile/transparentLeavesGradient.png) top left repeat-x;
               text-align:center;}


  li.blue {
   background-image:url(/images/mobile/arrow.png);
   background-repeat:no-repeat;
   background-position:right; 
   background-color:#013799;
  }
 </style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td class="logoHeader"><img src="/images/mobile/logoCopy.png" alt="Senior Living" /></td></tr>
<tr><td>
<ul class="pureCssMenu">
    <li class="white">1-800-888-8888 </li>
    <li class="blue"><a href="/about">ABOUT US</a></li>
    <li class="blue"><a href="/care-types">CARE TYPES</a></li>
    <li class="blue"><a href="/find-a-community">FIND A COMMUNITY</a></li>
    <li class="blue"><a href="/programs">PROGRAMS</a></li>
    <li class="blue"><a href="/gallery">VIDEO GALLERY</a></li>
    <li class="blue"><a href="/contact">CONTACT US</a></li>
</ul>
</td></tr>
</table>

</body>
</html>

我也尝试将类定义为.logoHeader(而不是td.logoHeader) - 结果相同。它没有风格。这是一个firebug屏幕截图,显示了它的内容: enter image description here

1 个答案:

答案 0 :(得分:2)

如果我在“样式”部分删除您的评论,我可以使用该类应用样式。 CSS评论应该是这种风格:/* Comment */

修改:添加了示例:http://jsfiddle.net/FMwRr/