精通CSS(层叠样式单)语法请帮忙看看
精通CSS(层叠样式单)语法请帮忙看看
在Web设计中，CSS(Cascading Style Sheet)其实是很熟悉的东西，不过在看一些复杂网页的CSS时，常常被一些莫名其妙写法搞得比较郁闷。于是在Google上翻啊翻，翻了一堆CSS的手册来看也没有彻底搞明白是怎么回事
。下面总结一下，希望能作为一个快速参考来对付那些"怪异"的CSS。
什么是"怪异"的CSS？比如这些：
<style>
.col, .col_wide
{
border: 1px solid #ebf0fa;
}
.col_cap *, .mod_cap *
{
cursor: move;
}
.col_head td, .col_head td a, .col_head td a:hover, .col_head td a:active
{
background-color: #ebf0fa;
}
v\:*
{
behavior: url(#default#VML);
}
#cbs, #cts
{
text-align : left;
}
.sg, .sg*, .ad, .ad*
{
color : #888888
}
.cb2#cft, .cb2#cfb
{
display : none
}
div#nstext
{
top: 0px;
}
</style>
希望大家给于讲解并说说这么些用法有什么优点呢？
。下面总结一下，希望能作为一个快速参考来对付那些"怪异"的CSS。什么是"怪异"的CSS？比如这些：
<style>
.col, .col_wide{
border: 1px solid #ebf0fa;}.col_cap *, .mod_cap *{ cursor: move;}.col_head td, .col_head td a, .col_head td a:hover, .col_head td a:active{ background-color: #ebf0fa;}v\:*{ behavior: url(#default#VML);}#cbs, #cts{ text-align : left;}.sg, .sg*, .ad, .ad*{ color : #888888}.cb2#cft, .cb2#cfb{ display : none}div#nstext{ top: 0px;}</style>希望大家给于讲解并说说这么些用法有什么优点呢？
posted on 2005-03-14 20:16 birdshome 阅读(3978) 评论(30) 编辑 收藏 收藏至365Key 所属分类: Jscript&Dhtml开发
评论
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
.col, .col_wide{} 这种表示两个样式名共用一个样式#cbs表示和网页中的ID对应，例如#cbs表示设置id为cbs的样式<tag id="cbs">
.col_head td 这种表示这个样式只对td标签有效
behavior: url(#default#VML); 表示行为
div#nstext 表示id为nstext，并且标签为div的
* "可能"表示通配符
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
恩，这个.col_head td a和.col_head td一样吗? CSS的Selector中空格有什么特殊含义吗？仅仅是分割？有什么顺序关序什么的说法吗？是不是td的Class还必须是"col_head"。# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
.Text中也有用到类似的css语法，这里的.col_head td应该是指当你把某个td的class定义为"col_head"时，使用该段样式，否则该段样式不被采用，有点像层次化的结构。这种语法通常是用来保证整个网站样式统一才使用的，由于十分细化，因此可以满足统一样式的需要# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
.xxx中的“.”是类选择符；#xxx中的“#”是ID选择符。例如：
<div class="framed"></div>
在.css文件中表示为
.framed {
padding: 0;
/* 其它定义 */
}
<div id="title"></div>
<div class="framed"></div>
在.css文件中表示为
#title {
padding: 0;
margin: 0;
/* 其它定义 */
}
标准的CSS还有很多其它规则，可以下载苏沈小雨的《CSS 2.0手册》学习。那是我见过最好的学习手册了。
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
.col_head td a:hover就是表示如果一个td他的class是.col_head时,td里面的a:hover的样式是XXX
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
@zsi没有上面的一些情况吧，我看过。欢迎提供其他"怪异"的CSS写法，最好能说明其特别之处:)
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
从外部CSS定义开始，到<style>再到style=""，后面的将把前面的覆盖。那个怪异用好像只在ie中有。我只知道在下面有作用：
<table class="col_head">
<tr><td><a href="asdf4.htm">asdf4</a></td></tr>
</table>
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
应该说类似上述情况吧。# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
这里有很多http://www.positioniseverything.net/
CSS 牵涉到不同浏览器的兼容性，要考虑能兼容多个浏览器的话这些小的 trick 非常多。
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
http://www.cnblogs.com/rchen/articles/100641.html?Pending=true# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
to：birdshome我是否可以转载你的文章？
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
@木野狐非常感谢您的资料! 不过我暂时不是考虑兼容性，只想把IE弄明白:)
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
@GirlSpicy转到火星吗?!
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
*选定文档目录树（DOM）中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。
目前IE5.5+尚不支持此种选择符。
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
老兄，其实很简单，空格表示嵌套，比如.ccc td就表示ccc类中的td标签，如果是div td就表示div中的td标签。前面加.就表示类比如.ccc就表示class="ccc"，如果前面加#就表示id，如#ccc就表示针对id="ccc"的元素，如果前面没有修饰副则表示标签，比如div，这样就表示div标签。a:hover之类的表示a标签的几种状态# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
to：birdshome想往我的个人网站上转，还没转呢！
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
<div class=div1>...........
<a href="">123</a>
...........
</div>
请问怎么样对该div中的a添加CSS样式控制呢？
.div1 div a:link
好像不行啊？
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
@fuyude如果没记错的话，你这样写就行
div a:link
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
@djshow这个解释没有记错应该是苏沈小雨的css手册上说的，不过看完还是很puzzle@_@。
能解释上面那些条目的网友都很精通CSS的，能不能说说这些"怪异"用法的优点呢？难道只使用的.xxx和#xxx不能搞定了吗？
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
在css标准中使用.XXX和#XXX是有原因的。关于.XXX的用法，是在html中使用class属性直接使用，如
<div class="XXX"></div>
这个div标签中的class属性就必须定义为.XXX的样式。
而#XXX这样的样式是id选择器，如：
<div id="xxx"></div>
当html引用了一个.css文件时，并且css中含有#xxx这样的css样式，ie将自动把这个样式赋予这个div标记。
使用这两种样式指定方式的原因是使用方便。假如你的网站中的页头和页脚全部使用一种样式，那么就可以使用#XXX这样的方式指定样式，只要元素的id已经在css中定义，那么就可以保证整个网站的页头和页脚样式一致。
而.XXX是专门给一个元素要在使用中动态改变显示样式时使用的，如一个<div></div>元素，它包含有一个<span></span>元素，你设定span的正常显示是.CSSA，那么可以这样
<span class="CSSA">内容</span>
当用户执行一些操作时，可以将这个<span></span>元素隐藏，那么就必须更改这个span元素的css样式，那么就可以在客户端脚本中动态指定另一个css，如.CSSB，当用户操作时，只要代码正确，那么元素就自动隐藏起来了。
另外，你说的
<div id="DivA">
<a href="...">...</a>
</div>
这样的CSS使用，实际上很简单，CSS有一个过滤器，他可以使用这样的方法过滤，如上面的那个a链接：
#DivA a:link{...}
就是指定这个链接的样式，很简单的。
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
to 笑望人生3xs.
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
样式表用的多了，你就会发现这些都会用到，在某些特殊的场合下，不用到也不行。当然一般还是class用的最多。# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
我发个评论还要验证码！# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
csdn那个blog还只让注册用户re，那才叫bt！btw: 现在你在哪里还能看见不要验证码的匿名提交啊？
# 请教高手 回复
请问各位大虾，如何在服务器端动态调用CSS？# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
随便找几个吓吓楼主*:target{background-color:#yellow}
.infobox :link {text-decoration:none;}
a[href^=http]:after{content:url('img/extURL');}
#post_comment input[type=submit] { width: 7em; }
tr:nth-child(2n+1) { background-color: red; }
ps: css2 的东西，ie不一定全支持
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
那个(2n+1)好像是和相邻的元素有关# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
在网站重构中看到过，又忘了# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
TO宝玉，behavior: url(#default#VML); 表示行为
请问这个url是必须的吗？括号里要以什么形式写出来呢？
# re: 精通CSS(层叠样式单)语法请帮忙看看 回复
url（）里买是定义行为文件的地址。括号里面还可以是一段js函数。