- 伪类选择器：不改变任何DOM内容。只是插⼊了⼀些修饰类的元素
:first-child {} //第⼀项
:last-child {} //最后⼀项
:nth-child(n) {} //第n项
:nth-child(2n+1){} //奇数项
:nth-child(2n) {} //偶数项
:not() //否定伪类 除了第n项
a:link {color:#FF0000;} /*未访问的链接*/
a:visited {color:#00FF00;} /*已访问的链接*/
a:hover {color:#FF00FF;} /*⿏标悬浮后的链接*/
a:active {color:#0000FF;} /*已选中的链接*/
::first-letter //第⼀个
::first-line //第⼀⾏ 只能⽤于块级元素
::selection //选中
::before //在开始位置
::after //在结束位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.yi {
color: red;
}
/* li:first-child{
color: red;
}
li:last-child{
color: blue;
}
li:nth-child(1){
color: green;
} */
/* li:nth-child(2n+1) {
color: pink
}
li:nth-child(2n){
color:yellow
} */
li:not(:nth-child(4)) {
color: red;
}
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: pink;
}
a:active {
color: yellow;
}
.text::first-letter {
color: red;
}
.text::first-line {
color: red;
}
.text::selection {
color: green;
}
.text::before {
content:'小滴课堂'
}
.text::after {
content:'小滴课堂'
}
/* span::first-line{
color: red;
} */
</style>
</head>
<body>
<ul>
<li>前端</li>
<li>后端</li>
<li>测试</li>
<li>大数据</li>
<li>课程</li>
<li>小滴</li>
<a href="https://xdclass.net">小滴课堂</a>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aperiam error veritatis omnis? Labore dolor,
reiciendis atque non natus vero tenetur iste sit alias id quasi nesciunt aspernatur cupiditate repudiandae,
temporibus ex. Qui voluptate asperiores assumenda quisquam natus nobis quis mollitia vitae totam. Dolorum
distinctio facere expedita error maiores fugit. Laboriosam error enim saepe. Accusamus voluptatem repellendus
debitis quod magni fugit autem dignissimos doloremque, consequuntur ratione dolorem veniam quis recusandae dolores
dolor sint sapiente voluptate architecto. Corrupti nam eos ipsa? Illum dolore nostrum nisi laboriosam nihil earum
quos eveniet veniam adipisci ea aspernatur cumque beatae eius laborum repellat, nam impedit, provident quis! Quo,
quasi corrupti. Sapiente doloremque consequatur corrupti labore vel consectetur sunt dolorum modi, perferendis,
quidem earum veritatis ipsa eveniet architecto obcaecati ea nostrum repudiandae? Explicabo tenetur asperiores
itaque quas, sint fugiat ratione, alias nobis praesentium accusantium possimus? Veritatis, asperiores quae nam
nostrum inventore cum repellendus officiis laudantium corrupti, sit doloribus dolor eligendi dolores maiores
assumenda, molestiae dolorum. Dolore praesentium amet voluptas optio ex iusto delectus quam, quis aut eaque
explicabo est debitis at quas harum fuga a minus iste facilis? Officia, corrupti commodi! Deleniti sunt fugit quae
nulla harum labore repellendus. Qui, est ipsa. Sunt consequuntur quibusdam accusamus.
</div>
<br>
<span>
sit doloribus dolor eligendi dolores maiores
assumenda, molestiae dolorum. Dolore praesentium amet voluptas optio ex iusto delectus quam, quis aut eaque
explicabo est debitis at quas harum fuga a minus iste facilis? Officia, corrupti commodi! Deleniti sunt fugit quae
nulla harum labore repellendus. Qui, est ipsa. Sunt consequuntur quibusdam accusamus.
</span>
</ul>
</body>
</html>
