Home  >  Article  >  Web Front-end  >  一个html中的两个表格设置了两个样式却适用同一个_html/css_WEB-ITnose

一个html中的两个表格设置了两个样式却适用同一个_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:16:391522browse

代码如下:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



表格






  
    
    
  
  
    
    
  
这个表格是绿色边框 这个表格是绿色边框
这个表格是绿色边框 这个表格是绿色边框



  
  
    
    
  
  
    
    
  
这个表格是红色边框 这个表格是红色边框
这个表格是红色边框 这个表格是红色边框




这是效果图:

回复讨论(解决方案)

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档





  
    
    
  
  
    
    
  
这个表格是绿色边框 这个表格是绿色边框
这个表格是绿色边框 这个表格是绿色边框



  
  
    
    
  
  
    
    
  
这个表格是红色边框 这个表格是红色边框
这个表格是红色边框 这个表格是红色边框



#dc table tr td,#dc table tr th{border: 1px solid #0F0;}#cd table tr td,#cd table tr th{border: 1px solid #F00;}


理解下css复合选择器的用法。 对照上面两段代码 看看。

#dc tr,th,td {
border: 1px solid #0F0;
}
#cd table tr,th,td {
border: 1px solid #F00;
}
你这2个选择器 其实每个都选择了3个 一个是#dc tr 一个是th 还一个是td

CSS code?1234567#dc table tr td,#dc table tr th{border: 1px solid #0F0;}#cd table tr td,#cd table tr th{border: 1px solid #F00;}

理解下css复合选择器的用法。 对照上面两段代码 看看。
第一个的意思是 包含在id为dc的table元素下的tr元素下的td元素和th元素共用声明{border: 1px solid #0f0;
第二个的意思和第一个是一样,只是id不同,理解的可对?
你想告诉我的是不是我的复合选择器写法不对?#dc tr,td,th{border……}这样写不正确?

嗯,已经弄懂了,确实是写法错误,同id下的复合选择器需要这样写:#dc th,#dc td {border……}才正确,特别感谢2楼和3楼朋友的指正!1楼朋友也谢谢,呵呵,不过你的代码治标不治本,你只是把第一个table下全写成th,第二个table下全写成td,虽然表格效果达到了,但是第一个表格全是标头哦,不是我想要的最终结果

嗯,已经弄懂了,确实是写法错误,同id下的复合选择器需要这样写:#dc th,#dc td {border……}才正确,特别感谢2楼和3楼朋友的指正!1楼朋友也谢谢,呵呵,不过你的代码治标不治本,你只是把第一个table下全写成th,第二个table下全写成td,虽然表格效果达到了,但是第一个表格全是标头哦,不是我想要的最终结果

不用客气 嘿嘿  

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn