zoukankan      html  css  js  c++  java
  • 【CSS】伪类和伪元素选择器

    伪类

    基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果。

    1. a:link  规定所有未被点击的链接

    2. a:visited  匹配多有已被点击过的链接

    3. a:active  匹配所有鼠标按下未松开的元素

    4. a:hover  匹配所有鼠标移入/悬停在元素上的元素

    5. :focus  被选中的元素;
    6. :first-child 元素的第一个子元素;

    7. :lang允许创作者来定义指定元素中使用的语言;

    伪类的规定:

    由于css的优先级问题,下面四个伪类需要按顺序书写,否则会出现问题

    L(link)V(visited)H(hover)A(active)

    love  and  hate(爱与恨)

    伪类hover的拓展:

    1. E:hover{} 对自身产生影响;
    2. E:hover  F{} 对子元素F产生影响(当F需要隐藏时)
    3. E:hover + F{} 对兄弟元素产生影响;

    一定要注意用E元素的伪类设置效果的作用对象跟E元素的关系(自身、子元素、兄弟元素)然后使用对应的选择器设置。

    伪元素

    基于元素的抽象,它跟伪类的区别就是它依赖于元素,其自身可作为一个抽象的元素来使用,行内元素,伪元素使用时要用两个冒号,但为兼容IE只写一个冒号。

    1. ::before   元素之前
    2. ::after  元素之后  

    3. ::first-letter  文本的首字母

    4. ::first-line  文本的首行

    伪元素清除浮动:clearfix类

    .clearfix{
          content: '';
          display: block;
          clear:both;      
    }    
    
    .clearfix{zoom: 1;}/*兼容IE*/

    伪元素设置小三角形:

    如上图,消息提示框上前面的小三角形即为伪元素设置,代码如下:

    .tips{/*消息框*/
            position: relative;
            width: 180px;
            padding: 10px;
            background-color: #56A9D3;
            border-radius: 4px;
        }
    
    .tips:before{
         /*相对于消息框设置位置*/
         position: absolute; top: 30%; left: -20px; content: ""; width: 0px; height: 0px; border: 10px solid transparent;/*用border的颜色来设置三角形显示,三边透明*/ border-right-color: #56A9D3; }

    一定要注意伪元素需要设置content之后才会显示出来,content: '';设置后才是真正的插入一个内容,即便为空也要设置。

  • 相关阅读:
    Vue使用QrCode插件生成二维码
    简述Vue的路由与视图
    EntityFrameworkCore将数据库Timestamp类型在程序中转为long类型
    Linux常用命令——软件包管理
    Linux常用命令——文本编辑器Vim
    Linux常用命令——关机重启命令
    Linux常用命令——网络命令
    Linux常用命令——压缩解压命令
    Linux常用命令——文件搜索命令
    .NET Core 配置GC工作模式与内存的影响
  • 原文地址:https://www.cnblogs.com/qiuyueding/p/7710014.html
Copyright © 2011-2022 走看看