请教高手, 如下代码(是一个faq系统, 嵌入网页代码中, 就可以在网页中显示faq问答, 特点是一点击问题就显隐答案.....我想做的就是学会用CSS来修改其中的字体等等 ),
我增加了#faq dd:first-letter { font-weight:bold; } 这一行, 但实际上答案开头的"A"字母并未粗体显示. 原因是什么呢?
上一行#faq dd{display:none;font-size:12pt;line-height:16pt;}.....原本只有display:none, 后面是我加的. 再上一行的字号也是我加的
不理解为什么原代码中使用#faq dd{display:none}, 是为了防止因为使用了js而使得某些浏览器无法显示出这些faq问答吗?
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.</title>
<script type="text/javascript">
var lastFaqClick=null;//上次点击的faq
window.onload=function(){
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "faq_dt_"+(Math.random()*100);
dt.onclick=function(){
var p=this.parentNode;//取得父节点
if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
for (var i=0,dd;dd=dds[i];i++)
dd.style.display='none';
}
lastFaqClick=this;
var dds=p.getElementsByTagName("dd");//取得该父节点所有的子节点，也就是所有的答案
var tmpDisplay='none';
if (gs(dds[0],'display')=='none')
tmpDisplay='block';
for (var i=0;i<dds.length;i++)
dds[i].style.display=tmpDisplay;
}
}
}
/**
*取得元素的真实css属性
*written in 06.7 sheneyan
*/
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
</script>
<style type="text/css">
*,html,body{margin:0;padding:0}
#faq dt{font-weight:bold;cursor:pointer;font-size:14pt;}
#faq dd{display:none;font-size:12pt;line-height:16pt;}
#faq dd:first-letter { font-weight:bold; }
</style>
</head>
<body>
<ul id="faq">
<li>
<dl><dt>Q: some question 1 </dt><dd><br>A: Blahblahblah.<br> </dd></dl></li>
<li>
<dl><dt><br>Q: some question 1? </dt><dd><br>A: blahblahblah!<br><br> </dd></dl>
</li>
</ul>
<br />
</body>
</html>
