结构性伪类选择器

<! 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 >