86的css学习笔记(一) —— 选择器
2007年9月21日
| 标签:
选择器分四种,通用选择器、一般选择器、特殊选择器和属性选择器。
1.通用选择器
没啥特殊的,就是设个基准值,优先级也是最低的
- *{
- font-size:12px;
- }
或者选中某一标签的全部个体
- p{
- font-size:12px;
- }
2.一般选择器
分两种,一种是id选择器,一种是类选择器
- #IdName{
- font-size:12px;
- }
- .ClassName{
- font-size:12px;
- }
3.特殊选择器 — 其实就是一些IE还不支持的CSS2选择器….
a.子选择器:影响容器内直接联系的子元素
- ul#UlName > li{
- font-weight:bolder;
- }
上述代码中UlName下的li字体会加粗而li嵌套下的li则不受影响
在不完全支持CSS2的浏览器中可以如下方法实现:
- ul#UlName li{
- font-weight:bolder;
- }
- ul#UlName li *{
- font-weight:normal;
- }
相比之下子选择器是相当的节省代码量的。
b.相邻同胞选择器:就是选择容器内第一个相应标签
- ul#UlName + li{
- font-weight:bolder;
- }
如上,只选中该UL中第一个li,显示为粗体,而后面的li不受影响。
不过目前只能有单独的一个类来实现了….
4.属性选择器
就是选中含有某属性的某一标签
- acronym[title]{
- border:1px blue solid;
- }
在《精通CSS》中给的例子是:
- a[rel="noffllow"]{
- background-image:url(nofollow.gif);
- padding-right:20px;
- }
- a[rel~="friend"]{
- background-image:url(friend.gif);
- }
在Google的PageRank评分中,带有rel=”noffllow”属性的链接将不会对目标站点的评分产生影响。
第二个里面的rel~=”friend”会寻找rel含有friend的链接,而不是完全匹配。
发表评论
| Trackback
