61,112
社区成员
发帖
与我相关
我的任务
分享css问题
刚学CSS,看了制作导航的一个例子，有点不明白
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;
border-bottom: 1px solid black;
background: rgb(218, 218, 218);
}
这里的ul#tabs是什么关系，是不是上下文相关选择符，为什么它们之间不能有空格
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;
border-bottom: 1px solid black;
background: rgb(218, 218, 218);
}
这里的ul#tabs是什么关系，是不是上下文相关选择符，为什么它们之间不能有空格
...全文
请发表友善的回复…
发表回复
jacshan 2006-09-14
- 打赏
- 举报
那ul#tabs是什么用法，应该是ul #tabs才对啊，为什么加了空格反到没不对了呢
孟子E章 2006-09-13
- 打赏
- 举报
#tabs表示ID选择符，ul#tabs 表示id=tabs的那些ul的样式
jacshan 2006-09-13
- 打赏
- 举报
这是<<CSS Instant Results>>书上的例子，讲得挺好的，可惜是英文版的，有些看不懂
jacshan 2006-09-13
- 打赏
- 举报
我也感到奇怪呢，有空格就不能正常显视了
//tabs.css
body, html {
margin: 0;
padding: 0;
}
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 25px;
border-bottom: 1px solid black;
background: #e98f00;
}
ul#tabs li {
float: left;
margin: 0 5px;
height: 23px;
text-align: center;
position: relative;
width: 150px;
border: 1px solid black;
top: 1px;
background: #FFD927;
}
ul#tabs li:hover {
border-bottom: 1px solid white;
background: white;
}
ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: white;
font: 14px 行楷, sans-serif;
}
body#index li#tab1,
body#news li#tab2,
body#search li#tab3{
background: white;
border-bottom: 1px solid white;
}
ul#tabs a:hover,
body#index li#tab1 a,
body#news li#tab2 a,
body#search li #tab3 a {
color: black;
}
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
}
test.html
<!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' xml:lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<link rel='stylesheet' type='text/css' href='tabs.css' />
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
</head>
<body id='index'>
<ul id='tabs'>
<li id='tab1'><a href='index.html'><span>首页</span></a></li>
<li id='tab2'><a href='news.html'><span>新闻</span></a></li>
<li id='tab3'><a href='serach.html'><span>搜索</span></a></li>
</ul>
</body>
</html>
//tabs.css
body, html {
margin: 0;
padding: 0;
}
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 25px;
border-bottom: 1px solid black;
background: #e98f00;
}
ul#tabs li {
float: left;
margin: 0 5px;
height: 23px;
text-align: center;
position: relative;
width: 150px;
border: 1px solid black;
top: 1px;
background: #FFD927;
}
ul#tabs li:hover {
border-bottom: 1px solid white;
background: white;
}
ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: white;
font: 14px 行楷, sans-serif;
}
body#index li#tab1,
body#news li#tab2,
body#search li#tab3{
background: white;
border-bottom: 1px solid white;
}
ul#tabs a:hover,
body#index li#tab1 a,
body#news li#tab2 a,
body#search li #tab3 a {
color: black;
}
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
}
test.html
<!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' xml:lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<link rel='stylesheet' type='text/css' href='tabs.css' />
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
</head>
<body id='index'>
<ul id='tabs'>
<li id='tab1'><a href='index.html'><span>首页</span></a></li>
<li id='tab2'><a href='news.html'><span>新闻</span></a></li>
<li id='tab3'><a href='serach.html'><span>搜索</span></a></li>
</ul>
</body>
</html>
孟子E章 2006-09-13
- 打赏
- 举报
表示ul下的id=tabs的样式
孟子E章 2006-09-13
- 打赏
- 举报
没有空格有效果？
应该有空格的吧
<style>
ul #tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;
border-bottom: 1px solid black;
background: rgb(218, 218, 218);
}
</style>
<body>
<ul>
<li id=tabs>aaaa</li>
<li id=tabs>aaaa</li>
<li id=tabs>aaaa</li>
</ul>
应该有空格的吧
<style>
ul #tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;
border-bottom: 1px solid black;
background: rgb(218, 218, 218);
}
</style>
<body>
<ul>
<li id=tabs>aaaa</li>
<li id=tabs>aaaa</li>
<li id=tabs>aaaa</li>
</ul>
