86的css学习笔记(一) —— 选择器

2007年9月21日 | 标签:

选择器分四种,、特殊选择器和属性选择器。
1.通用选择器
没啥特殊的,就是设个基准值,优先级也是最低的

  1. *{
  2. font-size:12px;
  3. }

或者选中某一标签的全部个体

  1. p{
  2. font-size:12px;
  3. }

2.一般选择器
分两种,一种是id选择器,一种是类选择器

  1. #IdName{
  2. font-size:12px;
  3. }
  4. .ClassName{
  5. font-size:12px;
  6. }

3. — 其实就是一些IE还不支持的CSS2选择器….
a.子选择器:影响容器内直接联系的子元素

  1. ul#UlName > li{
  2. font-weight:bolder;
  3. }

上述代码中UlName下的li字体会加粗而li嵌套下的li则不受影响
在不完全支持CSS2的浏览器中可以如下方法实现:

  1. ul#UlName li{
  2. font-weight:bolder;
  3. }
  4. ul#UlName li *{
  5. font-weight:normal;
  6. }

相比之下子选择器是相当的节省代码量的。

b.相邻同胞选择器:就是选择容器内第一个相应标签

  1. ul#UlName + li{
  2. font-weight:bolder;
  3. }

如上,只选中该UL中第一个li,显示为粗体,而后面的li不受影响。
不过目前只能有单独的一个类来实现了….

4.
就是选中含有某属性的某一标签

  1. acronym[title]{
  2. border:1px blue solid;
  3. }

《精通CSS》中给的例子是:

  1. a[rel="noffllow"]{
  2. background-image:url(nofollow.gif);
  3. padding-right:20px;
  4. }
  5. a[rel~="friend"]{
  6. background-image:url(friend.gif);
  7. }

在Google的PageRank评分中,带有rel=”noffllow”属性的链接将不会对目标站点的评分产生影响。
第二个里面的rel~=”friend”会寻找rel含有friend的链接,而不是完全匹配。

目前还没有任何评论.

无觅相关文章插件,快速提升流量