伪类选择器

最新推荐文章于 2022-04-25 22:48:44 发布

abc219365

最新推荐文章于 2022-04-25 22:48:44 发布

阅读量114

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/abc219365/article/details/120109890

版权

伪类选择器：这四个是有顺序的

：link 点击之前只适用于a

：visited点击之后只适用于a

：hover鼠标悬停适用于所有元素

：active鼠标放下适用于所有元素

<!DOCTYPE html>

<html>

<head>

<style>

.box{

width: 300px;

height: 300px;

background-color: aqua;

overflow: hidden; /*必须加浮动*/

}

.box:hover{

background-color: #008000;

color: #FF0000;

}

.box:active{

background: #CCCCCC;

}

a:link{

color: hotpink;

}

a:visited{

color: lawgreen;

}

a.hover{

color: azure;

}

a.active{

color: red;

}

</style>

</head>

<body>

</body>

</html>

元素的透明度：opacity：；取值0（完全透明）-1（不透明）

opacity设置整个元素的透明度

rgba写在谁上，设置谁的就是谁的透明的，比如background-color：rgba（）设置的就是背景颜色透明 color：rgba（）设置字体颜色透明

Css3新增的伪类选择器：

：first-child 第一个子元素是

：last-child 最后一个子元素是

：nth-child（number|odd|even|倍数n）第几个子元素是

例子：

<!DOCTYPE html>

<html>

<head>

<style>

.box>div:first-child{

color: red;

}

.box>div:last-child{

color: green;

}

.box>div:nth-child(3){

color: blue;

}

.box>div:nth-child(odd){ /*奇数*/

color: pink;

}

.box>div:nth-child(even){ /*偶数*/

color: palegoldenrod;

}

.box>div:nth-child(3n){ /*是3的倍数*/

color: palevioletred;

}