zoukankan      html  css  js  c++  java
  • 伪类分类

    常见的伪类:

    /*1/锚伪类 */
    /*初试状态*/
    a:link{
        color: green;
    }
    /*链接访问过后*/
    a:visited{
        color: red;
    }
    /*鼠标经过*/
    a:hover{
        color: yellow;
    }
    /*鼠标点击不放*/
    a:active{
        color: blue;
    }
    /*改变自己*/
    h1:hover{
        color: red;
    }
    
    /*选择器综合  伪类和包含选择器的综合*/
    /*.two{
        display: none;
    }*/
    /*鼠标经过时的对象:hover 被改变的对象
     鼠标经过时的对象与被改变的对象是父子关系
     * */
    /*.one li:hover .two{
        display: block;
    }*/
    /*鼠标经过时的对象:hover(+/~)被改变的对象
    鼠标经过时的对象与被改变的对象是兄弟关系
     */
    div:hover+p{
        font-size: 50px;
    }
    /*2/文本伪类*/
    .w{
        color: red;
        font-size: 30px;
    }
    /*第一个字*/
    .letter:first-letter{
        color: red;
        font-size: 30px;
    }
    /*第一行*/
    .letter:first-line{
        color: blue;
    }
    /*在最前面添加内容*/
    .letter:before{
        content: "1311 ";
    }
    /*在最后面添加内容*/
    .letter:after{
        content: " after";
    }
    /*3/结构性伪类*/
    ul{
        background: yellow;
    }
    /*.weilei .one{
        background: white;
    }
    .weilei .two{
        background: gainsboro;
    }*/
    /*css3新增*/
    .weilei li:nth-child(2n-1){
        background: white;
    }
    .weilei li:nth-child(2n){
        background: gainsboro;
    }
    /*所有的孩子作为基数*/
    /*.nth p:nth-child(2n){
        background: yellow;
    }*/
    /*只认p这个类型的孩子 作为基数*/
    .nth p:nth-of-type(2n){
        background: yellow;
    }
    /*.nth h1:nth-child(2n){
        background: yellow;
    }*/
  • 相关阅读:
    语句
    C#语言基础
    进制转换
    js对URL的相关操作集锦
    js/javascript计时器方法及使用场景
    js中FormData+XMLHttpRequest数据传输
    HTML中footer固定在页面底部的若干种方法
    js/jquery 禁用点击事件
    asp.net微信开发第七篇----高级群发(图文)
    asp.net微信开发第六篇----高级群发(文本)
  • 原文地址:https://www.cnblogs.com/lhl66/p/7528239.html
Copyright © 2011-2022 走看看