欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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>

正常状态:

CSS之伪类

鼠标移到div上时的样子:

CSS之伪类

鼠标左键按下后得样子:

CSS之伪类

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>

CSS之伪类

P1作为myDiv的第一个子元素被选中

3. :focus

向获得焦点的元素添加特殊样式,比如按钮被点击后,文本框输入文本

style>
input:focus{
    background-color:yellow;    
}
style>

input type='text' value=""/>

CSS之伪类

4. :lang

向带有指定lang属性的元素添加样式

style>
:lang(zh){
    color:red;    
}
style>

p lang="zh">p7p>

CSS之伪类

5. :target

:target伪类和超链接有关,当我们希望打开页面或者单击按钮定位到页面中某个元素时,常常是这样的

a href="#jump>jump 

#jump"

>This is paragraphp>

:target就是捕获点击超链接后,定位到的元素,在:target里面的CSS代码都是控制这个捕获到的元素的。

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>

CSS之伪类

点击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>

相关标签: CSS之伪类