css3选择器(小恰不小)论述.pdf

css3 选择器 （小恰不小） 01 属性选择器 [att*=val]： 如果元素用att表示的属性的属性值中包含用val指定的字符，则该元素使用这个样式。 style type=text/css /*id中含有section1都会变色*/ [id*=section1]{ background-color: yellow; } /style div id=section11111111111/div div id=subsection1-11111111111/div div id=subsection1-21111111111/div div id=section21111111111/div div id=subsection2-11111111111/div div id=subsection2-21111111111/div [att^=val] ： 如果元素用att表示的属性的属性值的开头字符为用val指定的字符，则该元素使用这个样式。 style type=text/css /*id中以section开头都会变色*/ [id^=section]{ background-color: yellow; } /style div id=section11111111111/div div id=subsection1-11111111111/div div id=subsection1-21111111111/div div id=section21111111111/div div id=subsection2-11111111111/div div id=subsection2-21111111111/div [att$=val] ： 如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式。 ?该属性选择器中在指定匹配字符前必须加上“\”这个escape字符 style type=text/css /*id中以-1结尾都会变色*/ [id$=\-1]{ background-color: yellow; } /style div id=section11111111111/div div id=subsection1-11111111111/div div id=subsection1-21111111111/div div id=section21111111111/div div id=subsection2-11111111111/div div id=subsection2-21111111111/div 02 结构性伪类选择器 伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，使用方法如下： 选择器：伪元素（属性：值） 伪元素选择器也可以与类配合使用，使用方法如下： 选择器.类名：伪元素（属性：值） 伪元素选择器 说明 first-line 用于向某个元素中的第一行文字使用样式 first-letter 用于向某个元素中的文字的首字母或第一个字使用样式 before 用于在某个元素之前插入一些内容 after 用于在某个元素之后插入一些内容 1、first-line style type=text/css p:first-line{ color: red; } /style p段落中的第一行br/段落中的第二行/p 2、first-letter style type=text/css p:first-letter{ color: red; } /style pThis is an english text./p p这是一段中文文字/p 3、before //可以插入一段文字 元素：before{ content：插入文字 } //也可以插入其他内容 元素：before{ content：url（test.wav） } style type=text/css /*在每个列表项目的文字的开头插入“wo”*/ li:before{ content:wo } /style ul li列表项目1/li li列表项目2/li li列表项目3/li li列表项目4/li li列表项目5/li /ul 4、after //可以插入一段文字 元素：after{ content：插入文字 } //也可