标签选择器


css2.1中的选择器:


id选择器:#id


类选择器:.class


标签类选择器:p


后代选择器:div p


交集选择器:div.class div#id


并集选择器:div,p


通配符:*


1.关系选择器


> 儿子选择器


+ 下一个兄弟选择器 IE7开始兼容


~下边的所有兄弟选择器,不会包括自己


在jQuery中的是没有兼容性问题的,包括IE6都是兼容的,都能够在$()中使用。


2.属性选择器


css3中可以通过任意属性选择元素


/*E[atetr^='val'] css3的属性,选择具有属性atter属性且以val开头的字符串元素*/


/*E[atetr$='val'] css3的属性,选择具有属性atter属性且以val结尾的字符串元素*/


/*E[atetr*='val'] css3的属性,选择具有属性atter属性 包含val开头的字符串元素*/


/*E[atetr|='val'] css3的属性,选择具有属性atter属性 且属性值用连字符分割val为‘-’前边的所有内容的字符串元素*/


IE7开始兼容


在jQuery中可以直接写$()没有兼容性问题


3.序选择器


儿子序选择器


使用伪类的:实现


p:first-child{}只要一个p是某个元素的第一个儿子,就会被选中,IE7开始兼容


p:last-child{}只要一个p是某个元素的最后一个儿子,就会被选中,IE9开始兼容


p:nth-child(1){}只要一个p是某个元素的第一个儿子,就会被选中,IE9开始兼容


    p:nth-child(3n+8){}只要一个p是某个元素的第8,11,14,17...个儿子,就会被选中,IE9开始兼容


p:nth-last-child(3){}只要一个p是某个元素的倒数第三个儿子,就会被选中,IE9开始兼容


p:nth-last-child(2n){}只要一个p是某个元素的倒数偶数个儿子,就会被选中,IE9开始兼容


p:nth-of-type(2){}只要一个元素p并且是同种标签(p)中的第二个儿子,就被选中,IE9开始兼容


p:nth-child(3)~p{}


jQuery中所有都是兼容的:


$('p').eq(3)与$('p:nth-child(4)')是否等价?不等价,第一个找的是全局,第二个只找儿子


伪类


a的伪类:a:link a:hover a:visited a:active 必须按顺序(总结为 l,o,v,e)


1.hover可以给所有元素使用


:hover 这个选择器在css3中,能够给任何元素使用,IE7开始兼容


2.:focus得到焦点


当一个表单元素得到焦点,就能被:focus选中


3.:not反选


p:not(.lala) 所有没有.lala类的p


4.:only-child 唯一儿子


p:only-child{


color:red;


}


如果一个p是某一个元素的唯一儿子,name就选它,ie9开始兼容


5.:empty 空标签


当一个标签是首位相连的,也就是中间没有任何内容,包括空格,tab,换行,文字等,就是:empty


6.:checked 选中的


单选按钮,复选框如果被选中就能被伪类:checked选中


input[type='radio']:checked{}


7.:disabled和enabled


ie9开始兼容


无效的和有效的input控件


伪元素


::before  ::after


两个冒号是伪元素


content:表示内容,必须有,没有content则为语法错误,如果content没有内容,写content:'';


注:


这两个伪元素都是行内元素,必须转为块级元素或者脱标才能设置宽高


::after可以用来清除浮动


2.::selection 被选中的文字的样式


3.::first-letter,::first-line第一个文字和第一行