css3学习总结1--CSS3选择器

CSS3的属性选择器主要包括以下几种：

• 1. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；

• 2. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；

• 3. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

示例

.classNamea[href^="http://"]{background:orange;color:blue;}
.classNamea[href$="png"]{background:green;color:black;}
.classNamea[title*="hubwiz"]{background:black;color:white;}

CSS3选择器，或者CSS3结构类，首先列出他具有的选择方法：

• 1. :first-child选择某个元素的第一个子元素；
• 2. :last-child选择某个元素的最后一个子元素；
• 3. :first-of-type选择一个上级元素下的第一个同类子元素；
• 4. :last-of-type选择一个上级元素的最后一个同类子元素；

示例：

.classNameli:first-child {background: green; border: 1px dashed blue;}
.classNameli:last-child {background: green; border: 2px dashed blue;}
.className> p:first-of-type {background: green;}

.className> p:last-of-type {background: green;}

• 5. :nth-child()选择某个元素的一个或多个特定的子元素；

　　示例：

　　　　1. 简单数字序号写法 :nth-child(number)，直接匹配第number个元素。参数number必须为大于0的整数。

如下，把第3个p的背景设为绿色：

p:nth-child(3){background:green;}

　　　　2. 倍数写法 :nth-child(an)，匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

如下，把第2、第4、第6、…、所有2的倍数的p的背景设为蓝色：

p:nth-child(2n){background:blue;}

　　

　　　　3. 倍数分组匹配 :nth-child(an+b)与:nth-child(an-b)，先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。

　　　　如下，匹配第1、第4、第7、…、每3个为一组的第1个p元素

p:nth-child(3n+1){background:orange;}

　     　如下，匹配第3-1=2、第6-1=5、…、第3的倍数减1个p元素

p:nth-child(3n-1){background:#33FF33;}

　　

　　　　4. 奇偶匹配 :nth-child(odd)与:nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

这里，我们为奇数和偶数p元素指定两种不同的背景色：

p:nth-child(odd){background:#ff0000;}
p:nth-child(even){background:#0000ff;}

• 6. :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

.className p:nth-last-child(4) {background: red;}

　

• 7. :nth-of-type()选择指定的元素；

　　　　　:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素，其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处。

• 8. :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；

　　　　:nth-last-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数(n可以是数字或公式)。

• 9. :only-child选择的元素是它的父元素的唯一一个了元素；

　　　　E:only-child，匹配那些是其父元素唯一子元素的E元素。简单来说就是匹配父元素中只有一个子元素的类型元素。说白了就是E元素的父级只有它本身一个子元素。

• 10. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

　　:only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的。

　　　所以我们使用这种选择器就可以选中元素的唯一子元素。

　　　说白了就是选择它的各类型子元素中个数只有一个的那一类

div :only-of-type{
background-color: green;
}

　　

• 11. :empty选择的元素里面没有任何内容。

　　empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。