zoukankan      html  css  js  c++  java
  • CSS 基础 例子 伪元素和伪类 & 区别

    一、概念

    • CSS 伪类   -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果
    • CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到效果

    伪类种类

    伪元素种类

    二、基本例子

    伪类:

    p>i:first-child {color;red}

    p下边的第一个子元素的颜色为红色

    <p>
      <i>first</i>
      <i>second</i>
    </p>

    要达到同等效果,可以这么实现:

    .first-child {color;red}

    <p>
      <i class="first-child">first</i>
      <i>second</i>
    </p>

    即,通过设置class来实现

    伪元素:

    p:first-letter {color: red}

    p元素的中文本的第一个字母,颜色为红色

    <p>I am stephen lee.</p>

    即字母I为红色

    要达到同样效果,要讲字母I放在一个元素span中,再给span设置样式

    .first-letter {color: red}

    <p><span class='first-letter'>I</span> am stephen lee.</p>

    区别:伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

    三、其他例子

    伪元素

    1、向h1元素之前添加图片

    h1:before

    {

      content:url(smiley.gif);

    }

    2、向h1元素之后添加图片

    h1:after

    {

      content:url(smiley.gif);

    }

    3、为元素和css类结合

    p.article:first-letter {color:#ff0000;}

    <p class="article">文章段落</p>

    即,样式为article的p元素中的第一个字母的样式

    伪类:

    1、a伪类

    a:link {color:#FF0000;} /* 未访问的链接 */

    a:visited {color:#00FF00;} /* 已访问的链接 */

    a:hover {color:#FF00FF;} /* 鼠标划过链接 */

    a:active {color:#0000FF;} /* 已选中的链接 */

    2、伪类和 css类

    a.red:visited {color:#FF0000;}
    <a class="red" href="css-syntax.html">CSS 语法</a>

    样式类为red的a元素已经访问的样式

    3、伪类和组合选择器

    p:first-child i { color:blue; }

    p元素下的第一个元素里边的所有i元素的样式

  • 相关阅读:
    drf3
    字典的操作方法
    列表的操作方法
    字符串的操作方法
    while循环和基本运算符
    初识数据类型
    USDT相关
    带团队
    CentOS7更改时区及同步网络时间
    mac胡刷新dns
  • 原文地址:https://www.cnblogs.com/shawnhu/p/8342506.html
Copyright © 2011-2022 走看看