天行博客

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

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