10个特殊CSS选择器的使用技巧

时间:2012-09-29 17:00:27

 在DIV+CSS的网页布局中,CSS的巨大灵活性让我们得以通过对CSS选择器的巧妙运用,设计出千变万化、绚丽多彩的网页效果。

对于CSS选择器来说,除了我们非常熟悉的例如id选择器、类选择器、元素选择器等基本的CSS选择器外,还有很多我们未曾或极少使用过的CSS选择器,这篇文章将系统的介绍这些非主流的CSS选择器,以便于我们能更深刻的体会到CSS在网页布局中巨大灵活性,方便我们在以后的网页设计中,更能熟练的运用CSS进行网页布局。

10个特殊CSS选择器的使用技巧

1,* {

margin: 0;

padding: 0;

}

众所周知,任何一款浏览器,都有其基本默认网页效果,单独一个*选择符将会对页面每一个元素产生作用,通常我们可以用来格式化浏览器默认效果。

2,ul + p {

color:#ff0000;

}

上述代码将会匹配ul后面的第一个p,将p段落内的文字颜色设置为红色。

3,a[title] {

color:#ff0000;

}

上述代码将会匹配所有带有title属性的链接元素,将该元素的链接设置为红色。

4,a[href="http://www.huceo.com"] {

color: #ff0000; 

}

上述代码将会匹配所有href属性,且href属性为http://www.huceo.com的所有链接,并将该链接设置为为红色。如果希望匹配所有href属性包含huceo.com的链接,只需在href后面加上*即可,例如a[href*="huceo.com"]。

同理,该选择器还可以通过a[href^="http"]的方式匹配所有href属性中以http开头的链接。

5,p::first-line {

color: #ff0000; 

font-weight: bold;

}

上述代码定义了p段落中第一行的样式,文字为红色加粗效果。同样p::first-letter选择器可以设定段落中第一个字母的样式,支持IE6及其他所有独立内核浏览器。

6,a[href$=".jpg"]{

color: #ff0000;

}

上述选择器,通过使用$来匹配所有包含.jpg格式的图片链接,并将其设置为红色。其他格式的图片同样可以通过更改选择器中的匹配值来实现任何图片链接的匹配。

另一种方法还有,通过为所有的图片链接加一个data-filetype="image"属性,来实现图片链接的匹配。例如:<a href="http://www.huceo.com/2wm.jpg" data-filetype="image">小宇博客</a>。CSS选择器如:a[data-filetype="image"]。

如果需要匹配多个值,例如可以用分别用选择器a[data-info~="image"] ,a[data-info~="external"]来实现,html链接部分只需加一个data-info="external image"属性即可实现多值匹配。

7,input[type=radio]:checked {

border: 1px solid #ff0000;

}

上述代码将匹配所有处于选定状态下的单选radio属性,设置其边框为1px,且为红色。兼容1E9以上及其他带有独立内核的浏览器。

8,div:hover {

background:#ff0000;

}

上述代码大家一定很熟悉,但大家通常只用在链接元素上,原因是IE6对其不兼容。该代码设定鼠标划过元素时的样式,例如上述代码定义了鼠标划过某div时,背景为红色。兼容IE7以上及其他带有独立内核的浏览器。

9,li:nth-child(2) {

color:#ff0000;

}

该伪类用于定义li等序列元素中第几个元素的样式,例如上述代码设定第二个li元素的字体为红色。同时还可以使用li:nth-last-child(2)选择器,设定倒数第二个的li元素的的样式效果。

10,div p:only-child {

color:#ff0000;

}

该代码将只会匹配div下第一个p段落的样式效果。如果在同一div中有多个p,该伪类只会在其中第一个p段落产生文字为红色的效果,兼容IE9以上及其他带有独立内核的浏览器。

当然,CSS这类功能强大的选择器远不及如此,但由于篇幅有限,只介绍到这里,更多的CSS选择器大家可以专业网站上查询。

如无特殊说明,以上CSS代码均支持内核为IE7以上,及其他例如Chrome、Firefox、Safari、Opera等常用浏览器。

 

本站所有文章均为小宇博客原创,转载请注明来源及出处!

作者:宇天行

本文首发地址:http://www.huceo.com/post/304.html

或许您还会喜欢这些文章:

Tags: 作者:宇天行 | 分类:开发技术 | 评论:50 | 浏览:5458

您对本文《10个特殊CSS选择器的使用技巧》有哪些看法?  ---  【期待您的评论】

您正在以游客身份发表评论:

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

宇天行2014-09-28 11:14:50回复评论
多看看就明白啦
宇天行2014-09-28 11:14:26回复评论
哈哈,更新是比较慢!
宇天行2014-09-28 11:14:09回复评论
啊,俩年前的评论正好看到,主题还好!
宇天行2012-10-25 20:40:45回复评论
还以为是论坛,结果是博客。
宇天行2012-10-25 20:39:42回复评论
多熟悉熟悉就好了。。。
宇天行2012-10-21 19:59:24回复评论
多看看CSS规则就明白了
宇天行2012-10-21 19:58:32回复评论
做网站肯定要会的
宇天行2012-10-21 19:58:09回复评论
嗯,熟能生巧嘛
宇天行2012-10-21 19:57:42回复评论
果断...
宇天行2012-10-12 20:17:57回复评论
平时抽空多看规范文档就会了。
宇天行2012-10-12 20:17:24回复评论
这个与C没太大关系...
宇天行2012-10-12 20:16:50回复评论
多看看就会了哦
宇天行2012-10-12 20:16:29回复评论
做网站必学科目吧...
宇天行2012-10-12 20:15:59回复评论
天天快乐!
郭芳芳2013-06-10 13:58:04回复评论
感觉好高深,不懂哦
宇天行2014-09-28 11:14:50回复评论
多看看就明白啦
别墅铜门2013-05-14 20:43:34回复评论
这个学习下挺好呵呵
经典大片2013-04-29 12:54:36回复评论
这个文章真要好好学习学习
复制成功2013-04-24 15:47:36回复评论
ddcms更好用吧。
齿轮2013-01-11 09:16:02回复评论
不错噢,学习了。谢谢博主分享
不错,支持一下。
学习,感谢博主分享!
活塞杆2012-12-14 11:24:42回复评论
这是个不错的技巧
鳞板输送机2012-12-11 12:38:18回复评论
技巧不错学习了
香港空间2012-11-28 11:54:22回复评论
学习学习
奶茶2012-11-11 15:27:11回复评论
挺漂亮的,很实用的技巧。另外,博主的博客主题真漂亮啊。
宇天行2014-09-28 11:14:09回复评论
啊,俩年前的评论正好看到,主题还好!
日照摄影2012-11-07 16:49:05回复评论
我来也。。支持喽
好看电影网2012-10-31 15:25:16回复评论
过来支持下,博主好像很久没更新了
宇天行2014-09-28 11:14:26回复评论
哈哈,更新是比较慢!
来支持一下!
来支持一下啦。
风云2012-10-25 14:30:50回复评论
学习到了很多,一定要顶一下。
吉林论坛2012-10-25 11:25:09回复评论
一直在关注,今日已签到!
宇天行2012-10-25 20:40:45回复评论
还以为是论坛,结果是博客。
那不是我2012-10-25 10:38:01回复评论
选择器好多规则不会用啊,。。
宇天行2012-10-25 20:39:42回复评论
多熟悉熟悉就好了。。。
好看电影网2012-10-22 14:26:16回复评论
谢谢分享
学习了,支持下
灵松儿2012-10-20 10:21:18回复评论
这属于技术活,看不太懂。
宇天行2012-10-21 19:59:24回复评论
多看看CSS规则就明白了
焕妍坊博客2012-10-19 20:47:34回复评论
css这个必须要懂
宇天行2012-10-21 19:58:32回复评论
做网站肯定要会的
好看电影网2012-10-19 14:55:49回复评论
谢谢博主,学习了
学习学习,
浏阳之窗2012-10-18 01:11:36回复评论
css需要多多实践
宇天行2012-10-21 19:58:09回复评论
嗯,熟能生巧嘛
免投诉空间2012-10-17 22:08:47回复评论
楼主咋不更新文章呢
田思凌博客2012-10-17 22:01:08回复评论
谢谢博主的分享,学习一下。
泰海SEO2012-10-17 14:30:35回复评论
干货啊,值得收藏。
宇天行2012-10-21 19:57:42回复评论
果断...
溜达溜达。
快乐吧2012-10-16 01:00:08回复评论
对于CSS新手来说,好东西果断收下了。
谢谢分享,回访哦!
收藏起来
杨宇成2012-10-11 16:51:26回复评论
还不太会用CSS。
宇天行2012-10-12 20:17:57回复评论
平时抽空多看规范文档就会了。
c语言这块没学好
宇天行2012-10-12 20:17:24回复评论
这个与C没太大关系...
学不会啊
仿牌主机2012-10-10 15:10:47回复评论
css+div一直是趋势

站内文章搜索

转播分享好友

网盟广告赞助