CSS之伪类
程序员文章站
2022-04-01 20:03:56
...
1.
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:hover 当鼠标悬浮在元素上方时,向元素添加样式
:active 向被激活的元素添加样式(被点击)
以上四种伪类应用于超链接时,a:hover必须在a:link和a:visited之后,a:active必须在a:hover之后,a:link和a:visited两者的顺序没有规定
1.1 超链接:
style>
a:link{
color:red;
}
a:visited{
color:green;
}
a:hover{
color:blue;
}
a:active{
color:yellow;
}
style>
a href="#">pmx-cnblogsa>
1.2 div
style>
div{
width:100px;
height:100px;
background-color:red;
border:3px solid blue;
overflow:hidden;
transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s;
line-height:100px;
text-align:center;
}
div:hover{
background-color:green;
width:300px;
height:300px;
line-height:300px;
font-size:2em
}
div:active{
color:yellow;
}
style>
div>This is divdiv>
正常状态:
鼠标移到div上时的样子:
鼠标左键按下后得样子:
2. :first-child
p:first-child选择作为某个元素的第一个子元素的p元素,而不是选择p元素的第一个子元素
style>
#myDiv > p:first-child{
background-color:#3C6;
}
style>
body>
p>p8p>
div id='myDiv' style='width:300px;height:300px;overflow:auto'>
p>p1p>
p>p2p>
p>p3p>
div>
p>p4p>
p>p5p>
div>
div>
p>p6p>
p>p7p>
body>
P1作为myDiv的第一个子元素被选中
3. :focus
向获得焦点的元素添加特殊样式,比如按钮被点击后,文本框输入文本
style>
input:focus{
background-color:yellow;
}
style>
input type='text' value=""/>
4. :lang
向带有指定lang属性的元素添加样式
style>
:lang(zh){
color:red;
}
style>
p lang="zh">p7p>
5. :target
:target伪类和超链接有关,当我们希望打开页面或者单击按钮定位到页面中某个元素时,常常是这样的
a href="#jump>jump
#jump"
>This is paragraphp>
:target就是捕获点击超链接后,定位到的元素,在:target里面的CSS代码都是控制这个捕获到的元素的。
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
:target{
background-color:red;
}
style>
head>
body>
a href="#jump1">jump To 1a>
a href="#jump2">jump To 2a>
p id="jump1">This is paragraph1p>
p id="jump2">This is paragraph2p>
body>
html>
点击jump to 1时,paragraph1变红。
点击jump to 2时,paragraph2变红
:target表示所有被定位到的元素,背景色改变。如果我们想让paragraph1单独变红,可以这样:
style>
#jump1:target{
background-color:red;
}
style>
案例:
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
.tab_list{
position: relative;
margin:50px;
min-height: 200px;
}
.tab_content{
position: absolute;
width:600px;
height:170px;
padding:15px;
border:1px solid #91a7b4;
border-radius:3px;
box-shadow:0 2px 3px rgba(0,0,0,0.1);
font-size:1.2em;
line-height:1.5em;
color:#666;
background-color: #fff;
overflow: hidden;
}
.tab_menu{
position: absolute;
top:100%;
list-style-type: none;
margin:0;
padding:0;
}
.tab_menu li{
display:inline-block;
}
.tab_menu a{
text-decoration: none;
display:block;
padding:5px;
font-size:12px;
font-family:"楷体";
color:#333;
border:1px solid #91a7b4;
border-radius: 0 0 5px 5px;
background-color:#e3f1f8;
margin-right:10px;
}
:target{
z-index:10;
}
style>
head>
body>
div class="tab_list">
ul class="tab_menu">
li>a href="#tab1">标签一a>li>
li>a href="#tab2">标签二a>li>
li>a href="#tab3">标签三a>li>
ul>
div id="tab1" class="tab_content">欢迎加设计达人Q群:50063010br/>
设计达人以原创和分享一些高质量的设计文章为主,希望喜欢!
div>
div id="tab2" class="tab_content">
p>本Tab切换效果纯CSS3制作,无任何JavaScriptp>
最新Q群:50063010br/>
爱设计,爱分享——设计达人(a href="http://www.shejidaren.com">http://www.shejidaren.coma>)
div>
div id="tab3" class="tab_content">
p>高质量设计文章分享平台p>
p>欢迎加设计达人Q群:50063010br />a href="http://www.shejidaren.com/">设计达人a>以原创和分享一些高质量的设计文章为主,希望喜欢p>
div>
div>
body>
html>
推荐阅读