结构性伪类选择器

<! DOCTYPE html > < html lang = "en" > < head > < title > 结构性伪类选择器 </ title > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < style > a:hover { color : red ; } /* first-line伪元素选择器：用于某个元素的第一行文字使用样式 */ .p1::first-line { color : blue ; } /* first-letter:用于为某个元素的文字的首字母 或第一个字使用的样式 */ .p2::first-letter { color : red ; } /* before after */ /* before在元素的开头插入内容 */ .p1::before { content : 'gaozhen' } /* before在元素的结尾插入内容 */ .p1::after { content : 'gaozhen' } /* not选择器，排除选择的元素 */ /* body *:not(a) { color: red; } */ :target { background-color : gray ; } /* nth-child nth-last-child */ /* nth-child()从元素的开头数第几个元素的样式 */ ul li:nth-child( 3 ) { color : blue ; } ul li:nth-last-child( 2 ) { color : brown ; } /* nth-child()设置奇数和偶数样式时，是针对所有的子元素 */ /* 奇数样式 */ .s-ul li:nth-child(odd) { background-color : aqua ; } /* 偶数行样式 */ .s-ul li:nth-child(even) { background-color : aquamarine ; } /* 使用nth-of-type() 和 nth-last-of-type() */ .s-div h4:nth-of-type(odd) { background-color : blueviolet ; } .s-div h4:nth-of-type(even) { background-color : brown ; } /* nth-child()使用循环样式 */ .t-ul li:nth-child( 3n+1 ) { color : gray ; } .t-ul li:nth-child( 3n+2 ) { color : red ; } .t-ul li:nth-child( 3n+3 ) { color : blue ; } /* only-child() 某个父元素只有一个子元素才使用的选择器*/ li:only-child { color : aqua ; } < / style > </ head > < body > <!-- <p>伪类选择器是css中定义好的选择器</p> --> < p class = "p1" > 11111111 < br /> 222222 </ p > < p class = "p2" > hello world </ p > < p > 3 </ p > < p > 4 </ p > < p > 5 </ p > < a > hover </ a > < hr / > < p id = "menu" > < a href = "#text1" > 1 </ a > < a href = "#text2" > 2 </ a > < a href = "#text3" > 3 </ a > < a href = "#text4" > 4 </ a > < a href = "#text5" > 5 </ a > </ p > < div id = "text1" > text1 </ div > < div id = "text2" > text3 </ div > < div id = "text3" > text3 </ div > < div id = "text4" > text3 </ div > < div id = "text4" > text5 </ div > < hr / > < ul > < li > li1 </ li > < li > li2 </ li > < li > li3 </ li > < li > li4 </ li > < li > li5 </ li > </ ul > < hr / > < ul class = "s-ul" > < li > li1 </ li > < li > li2 </ li > < li > li3 </ li > < li > li4 </ li > < li > li5 </ li > < li > li6 </ li > </ ul > < hr / > < div class = "s-div" > < h4 > 1 </ h4 > < p > 1 </ p > < h4 > 2 </ h4 > < p > 2 </ p > < h4 > 3 </ h4 > < p > 3 </ p > < h4 > 4 </ h4 > < p > 4 </ p > < h4 > 5 </ h4 > < p > 6 </ p > </ div > < hr / > < h3 > nth-child()循环样式 </ h3 > < ul class = "t-ul" > < li > 1 </ li > < li > 2 </ li > < li > 3 </ li > < li > 4 </ li > < li > 5 </ li > < li > 6 </ li > < li > 7 </ li > < li > 8 </ li > < li > 9 </ li > < li > 10 </ li > < li > 11 </ li > < li > 12 </ li > </ ul > < ul > < li > 111111 </ li > </ ul > <!-- UI元素状态伪类选择器 --> </ body > </ html >