当前位置：Gxlcms > html代码 > CSS之伪类

CSS之伪类

时间：2021-07-01 10:21:17 帮助过：11人阅读

: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群：50063010<br/>
            设计达人以原创和分享一些高质量的设计文章为主，希望喜欢！
        div>
        <div id="tab2" class="tab_content">
            <p>本Tab切换效果纯CSS3制作，无任何JavaScriptp>
            最新Q群：50063010<br/>
            爱设计，爱分享——设计达人（<a href="http://www.shejidaren.com">http://www.shejidaren.coma>）
        div>
        <div id="tab3" class="tab_content">
            <p>高质量设计文章分享平台p>
            <p>欢迎加设计达人Q群：50063010<br /><a href="http://www.shejidaren.com/">设计达人a>以原创和分享一些高质量的设计文章为主，希望喜欢p>
        div>

    div>
body>
html>

CSS之伪类

人气教程排行