Css3选择器

大家好,今天我们来讲一下css3里的选择器方面的知识。
相信很多同学会遇到想给单独的li 或者 a标签定义属性，但是又不想去给他单独起个类名，越起越乱。这个时候怎么办呢？就可以用到css3选择器了，让我们一点一点来了解一下：
我们讲两种常见的选择器:属性选择器 和 伪类选择器
首先我们说属性选择器，首先举个例子：


我们先创建4个input，分别写不一样的值名
我们用第一个选择器：

1. E[attr]:
   
   出来的效果是这样的，可以看出，只使用属性名，但没有确定任何属性值。
   然后我们用第二个选择器：
2. E[attr=“value”]:
   
   可以看到只有后两个变了颜色，说明指定属性名，并指定了该属性的属性值
   这回我们多加几个值名：
   
   用第三种方法
3. E[attr~=“value”]:
   
   可以看出，只有单独的值名 val 才会变色，所以指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开
4. E[attr^=“value”]：
   
   现在只有最后一个变色了，说明指定属性名，并且有属性值，只有a开头的才会具有属性。
5. E[attr$=“value”]：
   
   可以看出只有第三个ipunt变色了，说明指定了属性名，并且有属性值，而且属性值是以value结束的。
   6）E[attr*=“value”]：
   
   只有第四个变色了，说明指定了属性名，并且有属性值，而且属值中包含了u
6. E[attr|=“value”]：
   
   第一个和第四个变色了，指定了属性名，并且属性值仅是value或者以“val-”开头的值
   然后我们继续讲伪类选择器,又分为：结构性伪类选择器 和 目标伪类选择器
   结构性伪类选择器：
   首先创建10个列表来举例：
   

1）X:first-child 匹配子集的第一个元素。


可以看出第一个列表变了颜色
2）X:last-child 匹配父元素中最后一个元素


最后一个变了颜色，说明匹配了父元素里最后一个元素
3）X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始


这个是把第三个元素变了颜色，然后这个（n）括号里可以指定参数值，也可以写表达式

	如：2n  \2n+1    \  odd   \even
   代表：双数\单数

4）X:only-child


没有列表变颜色，为什么呢，因为这个选择器是选择父元素里唯一的子元素，如果有多个子元素，就不会匹配，案例当中有很多li标签，所以不匹配。
5）X:nth-last-child(n) 从最后一个开始算索引。


这是从后往前索引，第三个变颜色。

有人又要说了，我父元素里有好多标签比如li a p标签等
这个时候我们在代码中替换of-type 即可匹配同级中的元素，举个例子：

我们在ul里添加好多p标签

可以看到，第三个P标签变了颜色，其他代码均这样修改，即可达到同级匹配效果。

最后我列举出每一个选择器的作用：
1、属性选择器：
1）E[attr]：只使用属性名，但没有确定任何属性值
2）E[attr=“value”]：指定属性名，并指定了该属性的属性值
3）E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
4）E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的
5）E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的
6）E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value
7）E[attr|=“value”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）
2、伪类选择器：
X:first-child 匹配子集的第一个元素。IE7就可以支持
X:last-child 匹配父元素中最后一个X元素
X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始
注：(n) 括号里可以指定参数值，也可以写表达式
如：2n \2n+1 \ odd \even
X:only-child 这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅
有一个的p，也就是说，如果div内有多个p，将不匹配。 (唯一的一个子元素)
同级：
X:nth-last-child(n) 从最后一个开始算索引。
X:first-of-type 匹配同级(相同的元素)兄弟元素中的第一个X元素
X:last-of-type 匹配同级兄弟元素中的最后一个X元素
X:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素X
X:only-of-type 匹配属于同类型中唯一兄弟元素的X
X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X