css3的那些高级选择器一

　　css大家都不陌生了，从1996年12月css1正式推出，经历了1998年5月css2，再到2004年2月css2.1，最后一直到2010年推出的css3。css的推出给web带来巨大
的改变，使我们的网页样式多变，丰富多彩。现在所使用的css基本上是在1998年推出的css2的基础上发展而来的。

　　技术是发展的，2010年css3的推出，给我们带来许多亮点，比如可以创建圆角边框，可以在边框上使用图像等等。我也是被它这些新的样式所吸引。自己也一边
看一边学习，只是有新样式在部分浏览器是不支持的，但是也不妨碍我们对新的技术的追求。也随着现代浏览器的标准化，这些css3的新样式是迟早用的着，虽
然知识有点基础，但是每个技术都是基础牢固才会有更好的发展与突破，经常跟一些很牛逼的人聊天，他们都是工作一定的时候反过去看一些基础理论性的东西
，所以不要轻视基础，只有基础扎实，你的技术大厦才能更高，废话不多说，今天我就从css3的选择器说起。

css3之属性选择器

css3之属性选择器，其中包括：

1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]

下面我将用实例演示它们的用法

css代码：

<style type="text/css">
    p[id=p_name] {color:red;}
    p[id*=p] {border:1px solid #DDD;}
    p[id^=start] {font-weight:700}
    p[id$=end] {background:yellow}
</style>

效果如图1：

css3的那些高级选择器一

结构性伪类选择器

1.伪类选择器

在讲伪类选择器之前，我先说下类选择器，类选择器的使用如下所示：

<style type="text/css">
    p.p_test {color:#F60;}
</style>

伪类选择器,大家看到这个术语不是很懂，楼主跟你们一样，但是看到下面的示例，立马知晓：

<style type="text/css">
    a:link {color:#F00; text-decoration:none;}
    a:visited {color:#0F0; text-decoration:none;}
    a:hover {color:#F0F; text-decoration:underline;}
    a:active {color:#00F; text-decoration:none;}
</style>

　　看到这大家顿时知道了吧，在css中我们最常用的伪类选择器是使用在a元素上。那么伪类选择器与类选择器额区别是,类选择器可以随便起名字如“p.right”，
“p.left”；但是伪类选择器是css中已经定义好的选择器，不能随便起名。

2.伪元素选择器

伪元素选择器是指并不是对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器。

在css中有下面四个伪元素选择器：

2.1.first-line伪元素选择器(它用于某个元素中的第一行文字使用样式，只能与块级元素关联)

示例如下：

<html>
<head>
<style type="text/css">
p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }
</style>
</head>

<body>
<p>
This is a text.<br/>
That is a text.
</p>
</body>
</html>

View Code