CSS之伪类

时间：2023-03-09 09:02:26
CSS之伪类

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-cnblogs</a>

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 div</div>

正常状态:

CSS之伪类

鼠标移到div上时的样子:

CSS之伪类

鼠标左键按下后得样子:

CSS之伪类

 2. :first-child

p:first-child选择作为某个元素的第一个子元素的p元素，而不是选择p元素的第一个子元素

<style>
#myDiv > p:first-child{
   background-color:#3C6;
}
</style>

<body>
    <p>p8</p>
    <div id='myDiv' style='width:300px;height:300px;overflow:auto'>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <div>
            <p>p4</p>
            <p>p5</p>
        </div>
    </div>
    <p>p6</p>
    <p>p7</p>
</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">p7</p>

CSS之伪类

5. :target

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

<a href="#jump>jump</a> <!--必须是ID号-->
<p id="#jump">This is paragraph</p>

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

CSS之伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        :target{
            background-color:red;
        }
    </style>
</head>
<body>
    <a href="#jump1">jump To 1</a>
    <a href="#jump2">jump To 2</a>
    <p id="jump1">This is paragraph1</p>
    <p id="jump2">This is paragraph2</p>
</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>Document</title>
    <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制作，无任何JavaScript</p>
            最新Q群：50063010<br/>
            爱设计，爱分享——设计达人（<a href="http://www.shejidaren.com">http://www.shejidaren.com</a>）
        </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之伪类

6.:not(selector)匹配不是selector的元素或者选择器，注意selectro并不是字符串

6.1 p:not(.info)----选择除了class='info'之外的所有p元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .info{
            color:red;
        }
        .foo{
            color:blue;
        }
        p:not(.info){
            background-color:green;
        }
    </style>
</head>
<body>
    <p class="info">p1</p>
    <p>p2</p>
    <p class='foo'>p3</p>
    <p>p4</p>
</body>
</html>

CSS之伪类

6.2 :not(p) 选择除p以外的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            color:red;
        }
        :not(p){
            color:blue;
        }

    </style>
</head>
<body>
    <p class="info">p1</p>
    <p>p2</p>
    <p class='foo'>p3</p>
    <p id="pp">p4</p>
    <div>sdf</div>
</body>
</html>

CSS之伪类

注意:

　　1.当使用类选择符或者id选择符时,not前面要跟元素名作限制  p:not(.foo)或者p:not(#pp)不能是:not(.foo)

　   2.当使用元素标签作为选择器是，要给该元素设置样式，然后用:not(selector)来设置非selector的样式，而且它们设置的样式要一致

相关文章