Web前端|CSS伪类的实例(1) 前端|前端框架|经验分享

content: attr(href);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dn8RBuoG-1651287568110)(https://pic.faremax.info/20161024221404375.png)]
:focus
当元素获得焦点时的样式
input[type=“text”]:focus{
border: 1px purple solid;
box-shadow: 0 0 15px black;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZC6Y85Pb-1651287568112)(https://pic.faremax.info/20161021094742674.png)]
:disabled :enabled (CSS3)
被禁用元素的样式
input:disabled{
background-color: red;
}
input:enabled{
background-color: yellow;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WgYbfEsH-1651287568113)(https://pic.faremax.info/20170108223450178.png)]
:checked :read-only :read-write :indeterminate :invalid :valid (CSS3)
| 伪类 | 描述 |
| — | — |
| :checked | input中选中的radio、checkbox和select |
| :read-only | 有readonly属性的input、select和textarea元素(firefox不支持) |
| :read-write | 没有readonly属性的input、select和textarea可写元素(firefox不支持) |
| :indeterminate | 没有任一项被选中的radio组(firefox不支持) |
| :invalid | input表单验证不通过的元素 |
| :valid | input表单验证通过的元素 |
input[type=“checkbox”]:checked{
outline: 2px solid red;
}
input:read-only{
background-color: yellow;
}
input:read-write{
background-color: lightgreen;
}
input:indeterminate{
outline: 1px solid blue;
}
input[type=“email”]:invalid{
background-color: red;
color: #fff;
}
input[type=“email”]:valid{
background-color: #lightgreen;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5kGGjVQW-1651287568115)(https://pic.faremax.info/20170108230016821.png)]
:required :optional :in-range :out-of-range :default (CSS3)
| 伪类 | 描述 |
| — | — |
| :required | 具有required属性的input、select和textarea元素 |
| :optional | 没有required属性的可编辑的input、select和textarea元素 |
| :in-range | 在规定范围内的合法输入 |
| :out-of-range | 不在规定范围内的合法输入 |
| :default | 默认样式(仅firefox支持) |
:default{
background-color: green;
}
input:required{
background-color: yellow;
}
input:optional{
background-color: orange;
}
input:in-range{
background-color: lightgreen;
}
input:out-of-range{
background-color: red;
color: white;
}
input:indeterminate{
outline: 1px solid blue;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QUFiOaSn-1651287568116)(https://pic.faremax.info/20170109104942200.png)]
:link :hover :active :visited
:link 锚点的样式
:hover 鼠标浮动在元素上方时的样式(任何元素)
active 鼠标点击下去的样式(任何元素)
:visited 鼠标点击过后的颜色(任何元素)
百度
a:link{
text-decoration: none;
font-weight: bold;
color: black;
}
a:hover{
text-decoration: underline;
color: blue;
}
a:active{
text-decoration: none;
color: purple;
}
a:visited{
text-decoration: none;
color: darkgray;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3Tkl4UX-1651287568117)(https://pic.faremax.info/20161021100758031.jpeg)]
:first-child :last-child :nth-child :not :only-child
:first-child 第一个元素样式
:last-child 最后一个元素样式
:nth-child(n) 第n个元素样式(这个还能玩出花样的)
:not(selector) 不符合selector选择器的样式
ul li{
list-style: none;
background-color: skyblue;
color: white;
text-align: center;
width: 100px;
height: 20px;
margin: 5px auto;
float: left;
}
ul li:first-child{
color: blue;
}
ul li:last-child{
color: red;
}
ul li:nth-child(3){
color: darkgreen;
}
ul li:not([name=“except”]){
font-style: italic;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMWfquHv-1651287568117)(https://pic.faremax.info/20161021105629599.png)]
/下面实现偶数部分样式变化/
ul li:nth-child(2n){ /2n+1可以表示奇数的/
background-color: blue;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cn98eQ9r-1651287568118)(https://pic.faremax.info/20161021103822543.png)]
/下面实现连续部分样式变化/
ul li:nth-child(n+3):nth-child(-n+8){
background-color: blue;
}
/*
:nth-child(n+3)表示第三个以后的元素
:nth-child(-n+8)表示第8个以前的元素
因此这里选择了选择第三到第八的元素
*/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YB3YwknZ-1651287568118)(https://pic.faremax.info/20161021104928243.png)]
:only-child 放在下一节和:only-of-type比较讲解
:first-of-type :last-of-type :nth-of-type :nth-last-of-type :only-of-type
此外CSS3中:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n)用法与上述相似，作用也一致，其中:nth-last-of-type(n)表示倒数第n个元素。type和child的两种具有以下差别：
//伪代码
div1中的唯一子元素h3
div2中的第1个h3
div2中的第1个h4 div2中的第2个h3
div3中的第1个h3
div3中的第1个h4 div3中的第2个h3
div3中的第2个h4 div3中的第3个h3
div3中的第3个h4 h3:nth-of-type(2){
color: #00f;
}
h4:nth-child(4){
color: #ff0;
}
h4:only-of-type{
background-color: #ff0;
}
h3:only-child{
background-color: #f0f;
}
上面例子中还有 :only-child和CSS3中的:only-of-type两个伪类，表示单独的元素，也就是前后没有与之相同的元素。具体效果见下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qb7wIKQe-1651287568119)(https://pic.faremax.info/20170108220657728.png)]
:target
:target 选择器可用于选取当前活动的目标元素(即url中的锚元素)。
下面用target做一个选项卡的样式（点击切换）

标签一
标签二
标签三

内容一
内容二
内容三
#tab .title a{ 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】
float: left;
text-decoration: none;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
border:1px solid black;
}
#tab .title a:nth-child(n+2){
border-left:none;
}
#tab .content{
clear:both;
position:relative;
}
#tab .content li{
width:302px;
height:300px;
border:1px solid black;
border-top: none;
background-color: white;
position:absolute;
left:0;
top:0;
}
#tab .content li:target{
z-index:1;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1YNB3pdG-1651287568120)(https://pic.faremax.info/20161209105827016.gif)]
:before :after
这个是最值得一提的，在元素的前后添加内容，当然也可以添加一个块元素，这个块变化就无穷了，下面举几个例子：
- 首当其冲的就是清除浮动了
1 2 3 4 *{
margin:0;
padding:0;
}
.float{
width: 40px;
height: 40px;
background-color: blue;
margin: 5px;
float: left;
color: yellow;
}
.clr:after{
content: “”;
clear: both;
overflow: hidden;
height: 0;
display: block;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQHnIeC1-1651287568122)(https://pic.faremax.info/20161024221431922.png)]
- 自动计数
hello
world! world! world! world! world! hello
world! world! world! world! world! h3{
counter-increment: myNumH3;
counter-reset: myNumH4;
}
h3:before{
content: '第’counter(myNumH3)'章 ';
color: #08f;
}
h4{
/div>
*{
margin:0;
padding:0;
}
.float{
width: 40px;
height: 40px;
background-color: blue;
margin: 5px;
float: left;
color: yellow;
}
.clr:after{
content: “”;
clear: both;
overflow: hidden;
height: 0;
display: block;
}
[外链图片转存中…(img-JQHnIeC1-1651287568122)]
- 自动计数
hello
world! world! world! world! world! hello
world! world! world! world! world! h3{
counter-increment: myNumH3;
【Web前端|CSS伪类的实例(1)】counter-reset: myNumH4;
}
h3:before{
content: '第’counter(myNumH3)'章 ';
color: #08f;
}
h4{