zoukankan      html  css  js  c++  java
  • 伪元素与伪类

    伪类:

    伪类的语法:

    selector : pseudo-class {property: value}

    CSS 类也可与伪类搭配使用:

    selector.class : pseudo-class {property: value}

    锚伪类:

    在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

    a:link {color: #FF0000}        /* 未访问的链接 */
    a:visited {color: #00FF00}    /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}    /* 选定的链接 */

    在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素:

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    p:first-child {
      color: red;
      } 
    </style>
    </head>
    
    <body>
    <p>some text</p>
    <p>some text</p>
    </body>
    </html>

    效果:

    伪元素

    伪元素的语法:

    selector:pseudo-element {property:value;}

    CSS 类也可以与伪元素配合使用:

    selector.class:pseudo-element {property:value;}

    伪元素种类:

  • 相关阅读:
    JS条件判断小技巧
    简单实现节流函数和防抖函数(转载)
    一篇常做错的经典JS闭包面试题
    前端冷知识集结
    闭包
    仔细认识setInterval
    仔细认识setTimeout
    单方向指定时间内的匀速运动
    图片延迟加载
    优化网页上的gif
  • 原文地址:https://www.cnblogs.com/flyingcarp/p/9853203.html
Copyright © 2011-2022 走看看