CSS3伪类选择器

最新推荐文章于 2023-04-20 16:27:30 发布

阿波次嘚

最新推荐文章于 2023-04-20 16:27:30 发布

阅读量331

点赞数

本文链接：https://blog.csdn.net/weixin_45062076/article/details/113818495

版权

/*ie 6~8 版本大部分伪类选择器都不支持*/
/*状态伪类*/
input:enabled{color: blue;}/*匹配所有可用元素*/
input:disabled{color: blue;}/*匹配所有不可用元素*/
input:checked{color: blue;}/*匹配所有选中的元素*/

/*基本伪类*/
  a:link{color: blue;} /*点击链接之前*/
  a:visited{color: blue;} /*点击链接之后*/
  a:hover{color: blue;} /*鼠标移入*/
  a:active{color: blue;} /*点击左键*/
  input:focus{color: blue;} /*获得焦点*/

/*结构伪类*/
.divSon div:first-child{color: blue;}/*.divSon下的 第一个子元素*/
.divSon div:last-child{color: blue;}/*.divSon下的 最后个子元素*/
.divSon div:nth-child(odd){color: blue;} /*.divSon下的 奇数子元素*/
.divSon div:nth-child(2n+1){color: blue;} /*.divSon下的 奇数子元素*/
.divSon div:nth-child(even){color: blue;} /*.divSon下的 偶数子元素*/
.divSon div:nth-child(2n){color: blue;} /*.divSon下的 偶数子元素*/
.divSon div:nth-last-child(2){color: blue;}/*.divSon下的 最后一个子元素往上2个元素（包括自己）*/
.divSon div:last-of-type{color: blue;}/*.divSon下的 最后一个子元素  指定了元素类型*/
.divSon p:only-child{color: blue;}/*.divSon下的 只有一个p元素的话 那么p元素样式被改变*/
.divSon div:only-of-type{color: blue;}/*.divSon下的 */
.divSon div:empty{color: blue;} /*.divSon下的 div子元素 为空的元素*/
.divSon div:not(.div7){color: blue;} /*.divSon下的 div子元素class!="div7" 的 其他子元素 */

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
         /*状态伪类*/
        input:enabled{color: blue;}/*匹配所有可用元素*/
        input:disabled{color: blue;}/*匹配所有不可用元素*/
        input:checked{color: blue;}/*匹配所有选中的元素*/

        /*结构伪类*/
        .divSon div:first-child{color: blue;}/*.divSon下的 第一个子元素*/
        .divSon div:last-child{color: blue;}/*.divSon下的 最后个子元素*/
        .divSon div:nth-child(odd){color: blue;} /*.divSon下的 奇数子元素*/
        .divSon div:nth-child(2n+1){color: blue;} /*.divSon下的 奇数子元素*/
        .divSon div:nth-child(even){color: blue;} /*.divSon下的 偶数子元素*/
        .divSon div:nth-child(2n){color: blue;} /*.divSon下的 偶数子元素*/
        .divSon div:nth-last-child(2){color: blue;}/*.divSon下的 最后一个子元素往上2个元素（包括自己）*/
        .divSon div:last-of-type{color: blue;}/*.divSon下的 最后一个子元素  指定了元素类型*/
        .divSon p:only-child{color: blue;}/*.divSon下的 只有一个p元素的话 那么p元素样式被改变*/
        .divSon div:only-of-type{color: blue;}/*.divSon下的 */
        .divSon div:empty{color: blue;} /*.divSon下的 div子元素 为空的元素*/
        .divSon div:not(.div7){color: blue;} /*.divSon下的 div子元素class!="div7" 的 其他子元素 */

        /*基本伪类*/
        a:link{color: blue;} /*点击链接之前*/
        a:visited{color: blue;} /*点击链接之后*/
        a:hover{color: blue;} /*鼠标移入*/
        a:active{color: blue;} /*点击左键*/
        input:focus{color: blue;} /*获得焦点*/
        .div1:empty{color: aqua;}


    </style>
</head>
<body>
    <input type="text" value="input" disabled>
    <input type="text" value="input">
    <input type="radio" value="radio">
    <a href="#">abiaoqian</a>
    <div  class="divSon">
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
        <div>div4</div>
        <div>div5</div>
        <div>div6</div>
        <div class="div7">div7</div>
    </div>
    
</body>
</html>

阿波次嘚

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3伪类选择器

a:link{color: blue;} /*点击链接之前*/ a:visited{color: blue;} /*点击链接之后*/ a:hover{color: blue;} /*鼠标移入*/ a:active{color: blue;} /*点击左键*/ input:focus{color: blue;} /*获得焦点*/
复制链接

扫一扫