伪类
a标签有四种伪类，建议按顺序书写
link visited hover active
<style>
div{
/* 常态 */
width: 100px;
height: 100px;
background-color: gold;
}
div:hover{
background-color: tomato;
}
a:link{
/* 链接前 */
color: tomato;
}
a:visited{
/* 链接后 */
color: skyblue;
}
a:hover{
color:gold;
}
a:active{
color: pink;
}
input{
outline:0 ;
}
input:focus{
/* 获取焦点 */
border: 2px solid orange;
}
ul li:first-child{
/* 只能是第一个li，li是第一个子级元素 */
color: red;
}
ul li:first-of-type{
/* 第一个li类型的标签，li不用是第一个子元素 */
color: skyblue;
}
ul li:last-child{
/* 最后一个子级 */
color: greenyellow;
}
ul li:last-of-type{
/* 特定的最后一个子级 */
color: blue;
}
li:nth-child(2){
/* 第n个子元素 */
color: purple;
}
li:nth-of-type(2n){
/* 指定类型的第n个子元素【推荐】 */
color: hotpink;
}
li:nth-last-child(3){
/* 倒数第n个子元素 */
color: yellow;
}
li:nth-last-of-type(2n+1){
/* 指定类型的倒数第n个子元素 */
color: yellow;
}
</style>
伪元素
<style>
p{
color: skyblue;
}
p::before{
/* 元素前面的内容 */
content: "大家好，我是";
color: orange;
}
p::after{
/* 元素后面的内容 */
content: "欢迎大家学习C1";
color: tomato;
}
div{
width: 200px;
}
div::first-line{
/*文本的第一行样式 */
color: tomato;
}
div::first-letter{
/* 文本的首字母，只用于块元素 */
font-size: 40px
}
input::placeholder{
/* 只用于表单的提示文本*/
color: pink;
}
</style>
扫一扫
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
