"怪异"的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>

    希望大家给于讲解并说说这么些用法有什么优点呢？

posted on 2005-03-14 20:16 birdshome 阅读(121) 评论(16)  编辑 收藏

评论

# 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的
* "可能"表示通配符

2005-03-14 21:21 | 宝玉

# re: 精通CSS(层叠样式单)语法请帮忙看看   

恩，这个.col_head td a和.col_head td一样吗? CSS的Selector中空格有什么特殊含义吗？仅仅是分割？有什么顺序关序什么的说法吗？是不是td的Class还必须是"col_head"。

2005-03-14 21:26 | birdshome

# re: 精通CSS(层叠样式单)语法请帮忙看看   

.Text中也有用到类似的css语法，这里的.col_head td应该是指当你把某个td的class定义为"col_head"时，使用该段样式，否则该段样式不被采用，有点像层次化的结构。这种语法通常是用来保证整个网站样式统一才使用的，由于十分细化，因此可以满足统一样式的需要

2005-03-14 21:48 | Tony Qu

# 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手册》学习。那是我见过最好的学习手册了。

2005-03-14 22:29 | zsi

# re: 精通CSS(层叠样式单)语法请帮忙看看   

.col_head td a:hover
就是表示如果一个td他的class是.col_head时,td里面的a:hover的样式是XXX

2005-03-14 22:33 | robaggio

# re: 精通CSS(层叠样式单)语法请帮忙看看   

@zsi
没有上面的一些情况吧，我看过。欢迎提供其他"怪异"的CSS写法，最好能说明其特别之处:)

2005-03-14 22:38 | birdshome

# re: 精通CSS(层叠样式单)语法请帮忙看看   

从外部CSS定义开始，到<style>再到style=""，后面的将把前面的覆盖。

那个怪异用好像只在ie中有。我只知道在下面有作用：

<table class="col_head">
<tr><td><a href="asdf4.htm">asdf4</a></td></tr>
</table>

2005-03-15 00:07 | GirlSpicy

# re: 精通CSS(层叠样式单)语法请帮忙看看   

应该说类似上述情况吧。

2005-03-15 00:08 | GirlSpicy

# re: 精通CSS(层叠样式单)语法请帮忙看看   

这里有很多
http://www.positioniseverything.net/

CSS 牵涉到不同浏览器的兼容性，要考虑能兼容多个浏览器的话这些小的 trick 非常多。

2005-03-15 00:16 | 木野狐

# re: 精通CSS(层叠样式单)语法请帮忙看看   

http://www.cnblogs.com/rchen/articles/100641.html?Pending=true

2005-03-15 00:19 | 木野狐

# re: 精通CSS(层叠样式单)语法请帮忙看看   

to：birdshome
我是否可以转载你的文章？

2005-03-15 00:21 | GirlSpicy

# re: 精通CSS(层叠样式单)语法请帮忙看看   

@木野狐
非常感谢您的资料! 不过我暂时不是考虑兼容性，只想把IE弄明白:)

2005-03-15 00:23 | birdshome

# re: 精通CSS(层叠样式单)语法请帮忙看看   

@GirlSpicy
转到火星吗?!

2005-03-15 00:29 | birdshome

# re: 精通CSS(层叠样式单)语法请帮忙看看   

*
选定文档目录树（DOM）中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。
目前IE5.5+尚不支持此种选择符。

2005-03-15 08:22 | djshow

# re: 精通CSS(层叠样式单)语法请帮忙看看   

老兄，其实很简单，空格表示嵌套，比如.ccc td就表示ccc类中的td标签，如果是div td就表示div中的td标签。前面加.就表示类比如.ccc就表示class="ccc"，如果前面加#就表示id，如#ccc就表示针对id="ccc"的元素，如果前面没有修饰副则表示标签，比如div，这样就表示div标签。a:hover之类的表示a标签的几种状态

 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的 * "可能"表示通配符