zoukankan      html  css  js  c++  java

  • 703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

    属性选择器（attribute selectors） - [att]

    属性选择器 - [att=val]

    属性选择器 - [attr*=val]

    属性选择器 - [attr^=val]

    属性选择器 - [attr|=val]

    属性选择器 - [attr~=val]

    属性选择器 - [attr$=val]

    01_属性选择器.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      [title] {
        color: #f00;
      }

      /* [title="div元素"] {
            font-size: 25px;
        } */

      [title='one div元素'] {
        font-size: 25px;
      }

      /* 了解一下 */
      /* title中包含one单词 */
      [title*='one'] {
        background-color: #00f;
      }

      /* title以one开头 */
      /* [title^="one"] {
            background-color: #00f;
        } */

      /* title以one结束 */
      /* [title$="one"] {
            background-color: #00f;
        } */
    </style>
  </head>
  <body>
    <div title="one div元素">我是div元素</div>
    <p title="p元one素">我是p元素</p>
    <p title="p one">我是p元素</p>
    <p>我也是p元素</p>
    <span title="one span元素">我是span元素</span>
  </body>
</html>

    后代选择器（descendant combinator）

    02_后代选择器(最重要).html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      /* 后代选择器 */
      /* 选中 div下面的span元素(直接子元素和间接后代元素) */
      /* div span {
            color: #f00;
        } */

      div p span {
        color: #f00;
      }
    </style>
  </head>
  <body>
    <span>文字内容1</span>
    <div>
      <span>文字内容2</span>
      <p>
        <span>文字内容3</span>
      </p>
      <div>
        <span>文字内容4</span>
      </div>
      <span>文字内容5</span>
    </div>
    <div>
      <a href="#">
        <span>文字内容6</span>
      </a>
    </div>
  </body>
</html>

    子选择器（child combinators）

    03_子代选择器(重要).html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      div > span {
        color: red;
      }

      p > div {
        color: red;
      }

      .box > span {
        font-size: 30px;
      }

      .box > .title {
        background-color: #00f;
      }
    </style>
  </head>
  <body>
    <span>文字内容1</span>
    <div class="box">
      <span>文字内容2</span>
      <p>
        <span>文字内容3</span>
      </p>
      <div>
        <span>文字内容4</span>
      </div>
      <span class="title">文字内容5</span>
      <div class="title">呵呵呵呵呵</div>
    </div>
    <div>
      <a href="#">
        <span>文字内容6</span>
      </a>
    </div>

    <!-- <p>
        <div>哈哈哈哈</div>
    </p> -->
  </body>
</html>

    相邻兄弟选择器（adjacent sibling combinator）

    04_相邻兄弟选择器.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div + p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>文字内容0</p>
    <div>
      <p>文字内容1</p>
    </div>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <div></div>
    <p>文字内容4</p>
  </body>
</html>

    全体兄弟选择器（general sibling combinator）

    05_全兄弟选择器.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div ~ p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>文字内容0</p>
    <div>
      <p>文字内容1</p>
    </div>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <div></div>
    <p>文字内容4</p>
  </body>
</html>

    选择器组 - 交集选择器

    06_交集选择器(重要).html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* div {
            color: red;
        }

        .one {
            color: red;
        } */

      /* 文字1和文字4变成红色 */
      /* div.one {
            color: red;
        } */

      /* 文字2和文字4变成红色 */
      .one[title='text'] {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">文字内容1</div>
    <p class="one" title="text">文字内容2</p>
    <span class="one">文字内容3</span>
    <div class="one" title="text">文字内容4</div>
    <div title="text">文字内容5</div>
  </body>
</html>

    选择器组 - 并集选择器

    选择器组 - 交集、并集选择器对比

    练习

    07_并集选择器(重要).html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div,
      .one,
      [title] {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>文字内容1</div>
    <span class="one">文字内容2</span>
    <p title="text">文字内容3</p>
    <strong class="one">文字内容4</strong>
    <a href="#" class="one">文字内容5</a>
    <div>文字内容6</div>

    <div></div>
  </body>
</html>

    伪类（pseudo-classes）

    08_伪类_目标伪类.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      :target {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="#title1">标题1</a>
    <a href="#title2">标题2</a>
    <a href="#title3">标题3</a>

    <h2 id="title1">标题1</h2>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />

    <h2 id="title2">标题2</h2>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />

    <h2 id="title3">标题3</h2>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
  </body>
</html>

    09_伪类_元素状态伪类.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      button {
        background-color: #f00;
      }

      /* button[disabled] {
            color: red;
        } */

      :disabled {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- enable -> disable(不可用) -->
    <button disabled>我是按钮</button>
    <button>我是按钮</button>

    <a href="#">百度一下</a>
  </body>
</html>

    动态伪类（dynamic pseudo-classes）

    动态伪类 - :focus

    去除a元素默认的:focus效果

    细节

    10_伪类_动态伪类.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* 未访问状态 */
      a:link {
        color: red;
      }

      /* 已经访问过 */
      a:visited {
        color: green;
      }

      /* 手指(鼠标)放上去 */
      a:hover {
        color: blue;
      }

      /* 手指点下去, 未松手 */
      a:active {
        color: orange;
      }

      a {
        color: red;
      }

      /* 2.hover/active应用到其他元素 */
      strong:hover {
        background-color: purple;
      }

      strong:active {
        font-size: 40px;
      }

      /* 3.focus的使用 */
      input:focus {
        background-color: #f00;
      }

      a:focus {
        /* background-color: #ff0; */
      }

      /* 4.去掉a元素的焦点状态 */
      /* a:focus {
            outline: none;
        } */
    </style>
  </head>
  <body>
    <!-- 1.lv ha -> a元素上 -->
    <!-- tabindex可以调整tab选中元素的顺序 -->
    <a tabindex="-1" href="#">Google一下</a>

    <!-- 2.hover/active -->
    <strong>我是strong元素</strong>

    <!-- 3.focus -->
    <input type="text" />
  </body>
</html>

    11_伪类_已访问的链接.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      a:visited {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="#">百度一下</a>
    <a href="#123">京东一下</a>
    <a href="#321">淘宝一下</a>
  </body>
</html>

    结构伪类(structural pseudo-classes) - :nth-child()

    结构伪类 - :nth-child( )

    结构伪类 - :nth-child( )

    结构伪类 - :nth-child( )

    结构伪类 - :nth-last-child( )

    结构伪类 - :nth-of-type( )、:nth-last-of-type( )

    结构伪类

    结构伪类 - :empty

    否定伪类（negation pseudo-class）

    12_伪类_nth-child-数字.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      /* 1.第三个子元素 */
      /* :nth-child(3) {
            color: red;
        } */

      /* 2.交集选择器: 1.必须是p元素 2.p元素是子元素中第三个元素 */
      p:nth-child(3) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>文字内容1</p>
      <p>文字内容2</p>
      <p>文字内容3</p>
      <p>文字内容4</p>
      <p>文字内容5</p>
      <p>文字内容6</p>
      <p>文字内容7</p>
      <p>文字内容8</p>
      <p>文字内容9</p>
    </div>

    <p>
      <span>span文字内容1</span>
      <span>span文字内容2</span>
      <span>span文字内容3</span>
      <span>span文字内容4</span>
      <span>span文字内容5</span>
    </p>

    <div>
      <strong>strong文字内容1</strong>
      <strong>strong文字内容2</strong>
    </div>
  </body>
</html>

    13_伪类_nth-child-n.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p:nth-child(2n) {
            color: red;
        }

        /* 1.n: 自然数，不是整数，0不是整数，0, 1, 2, 3, 4, 5, 6, 7.... */
        /* p:nth-child(n) {
            color: red;
        } */

        /* 2.2n: 2, 4, 6, 8: 偶数 */
        /* 2n: 替换成 even */
        /* p:nth-child(2n) {
            color: red;
        } */
        /* p:nth-child(even) {
            color: red;
        } */

        
        /* 2.2n+1: 1, 3, 5, 7: 奇数 */
        /* p:nth-child(2n+1) {
            color: blue;
        } */
        /* 2n+1: 替换成odd */
        /* p:nth-child(odd) {
            color: blue;
        } */

        /* 3.3n */
        /* 3n: 3, 6, 9.... */
        /* 3n+2: 2, 5, 8  */
        p:nth-child(3n+2) {
            /* color: green; */
        }

        /* 4.负数: -n+5 */
        p:nth-child(-n+3) {
            color: red;
        }

    </style>
</head>
<body>
    <div>
        <p>文字内容1</p>
        <p>文字内容2</p>
        <p>文字内容3</p>
        <p>文字内容4</p>
        <p>文字内容5</p>
        <p>文字内容6</p>
        <p>文字内容7</p>
        <p>文字内容8</p>
        <p>文字内容9</p>
    </div>
    
    <!-- <p>
        <span>span文字内容1</span>
        <span>span文字内容2</span>
        <span>span文字内容3</span>
        <span>span文字内容4</span>
        <span>span文字内容5</span>
    </p> -->
</body>
</html>

    14_伪类_nth-child-强调.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* 
        交集选择器:
        * 是一个p元素
        * 同时p元素作为子元素的第一个元素
      */
      p:nth-child(1) {
        color: red;
      }

      /* 
        后代选择器: 
        * 选择p元素, 但是后面是一个空格, 选p的后代
        * 选择后代的第一个子元素
      */
      p span:nth-child(1) {
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <p>文字内容1</p>
      <p>文字内容2</p>
    </div>

    <p>
      <strong>strong1</strong>
      <span>span1</span>
      <span>span2</span>
    </p>
  </body>
</html>

    15_伪类_nth-last-child-数字.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* nth-child: 正着数(从前向后) */
        /* nth-last-child倒着数(从后向前) */
        
        /* 1.跟数字 */
        p:nth-last-child(3) {
            color: red;
        }

        /* 2.跟n */
        /* 0, 1, 2, 3 */
        /* 1, 3, 5, 7 */
        p:nth-last-child(2n+1) {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>文字内容1</p>
        <p>文字内容2</p>
        <p>文字内容3</p>
        <p>文字内容4</p>
        <p>文字内容5</p>
        <p>文字内容6</p>
        <p>文字内容7</p>
        <p>文字内容8</p>
        <p>文字内容9</p>
    </div>
</body>
</html>

    16_伪类_nth-of-type-数字.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      /* p:nth-child(3) {
            color: red;
        } */

      p:nth-of-type(3) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div>我是div元素</div>
      <p>文字内容1</p>
      <span>我是span元素</span>
      <p>文字内容2</p>
      <p>文字内容3</p>
      <p>文字内容4</p>
      <p>文字内容5</p>
      <p>文字内容6</p>
      <p>文字内容7</p>
      <p>文字内容8</p>
      <p>文字内容9</p>
    </div>
  </body>
</html>

    17_伪类_nth-of-type-n.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* p:nth-child(2n) {
            color: red;
        } */

      p:nth-of-type(2n) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div>我是div元素</div>
      <p>文字内容1</p>
      <span>我是span元素</span>
      <p>文字内容2</p>
      <p>文字内容3</p>
      <p>文字内容4</p>
      <p>文字内容5</p>
      <p>文字内容6</p>
      <p>文字内容7</p>
      <p>文字内容8</p>
      <p>文字内容9</p>
    </div>
  </body>
</html>

    18_伪类_nth-last-of-type.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* p:nth-last-child(3) {
            color: red;
        } */

      p:nth-last-of-type(3) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div>我是div元素</div>
      <p>文字内容1</p>
      <span>我是span元素</span>
      <p>文字内容2</p>
      <p>文字内容3</p>
      <p>文字内容4</p>
      <p>文字内容5</p>
      <p>文字内容6</p>
      <p>文字内容7</p>
      <p>文字内容8</p>
      <span>我是span元素</span>
      <p>文字内容9</p>
    </div>
  </body>
</html>

    19-伪类_only-child.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* 父元素中的唯一子元素 */
      /* 1.only-child  */
      /* body :only-child {
            color: red;
        } */

      /* 2.only-of-type: 唯一该类型的子元素 */
      body :only-of-type {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        <span>文字内容1</span>
      </p>
      <div>文字内容2</div>
      <div>div元素</div>
    </div>
    <div>
      <strong>文字内容3</strong>
      <a href="#">
        <span>文字内容4</span>
      </a>
    </div>
  </body>
</html>

    20_伪类_root.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      html {
      }

      :root {
      }
    </style>
  </head>
  <body></body>
</html>

    21_伪类_empty.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      :empty {
        height: 20px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div>
      <p></p>
      <span>哈哈哈</span>
    </div>
    <div>
      <strong>呵呵呵</strong>
      <a href="#">嘻嘻嘻</a>
      <div></div>
    </div>
  </body>
</html>

    22_伪类_否定伪类not.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* 除了div之外,所有的元素 */
      /* body :not(p) {
            color: red;
        } */

      :not(html) :not(body):not(div) {
        color: red;
      }

      /* body :not(body):not(div) {
            color: red;
        }

        div :not(body):not(div) {
            color: red;
        } */

      .p2 {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>文字内容1</div>

    <p class="p2">文字内容2</p>

    <span class="text">文字内容3</span>
    <div>文字内容4</div>

    <div>
      <span>哈哈哈哈</span>
    </div>
  </body>
</html>

    伪元素（pseudo-elements）

    伪元素 - ::first-line

    23_伪元素_first-line-letter.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      p {
         400px;
        background-color: #6cc;
      }

      p::first-letter {
        font-size: 50px;
      }

      p::first-line {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <p>
      印度AI视频监控平台Cognitifai致力于使用计算机视觉技术来保障公共安全。公司研发的全开放式AI平台Visionapi.ai可以应用在多个领域，其AI解决方案可以与企业系统平台无缝对接。
    </p>
  </body>
</html>

    24_伪元素_before和after.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* .number {
            color: red;
        } */

      /* 结论: 伪元素可以看成是行内元素 */
      span::before {
        content: '';

        /* color: red; */
        background-color: green;
        display: inline-block;
         100px;
        height: 30px;
        margin-right: 20px;
      }

      span::after {
        /* content: "abc"; */
        content: url('../img/test_01.webp');

        color: purple;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <!-- <span class="number">1</span> -->
    <span>我是span元素</span>
  </body>
</html>

  • 相关阅读:
    Java数据类型转换（自动转换和强制转换）
    Java数据类型以及变量的定义
    Java8新特性_日期时间新类 LocalDate、LocalTime、LocalDateTime
    Java8新特性_接口中的默认方法
    java8 新特性 Optional容器类
    Java8新特性 并行流与串行流 Fork Join
    Java8新特性_stream API 练习
    IDEA导入JUnit4
    Reduce:规约；Collector:收集、判断性终止函数、组函数、分组、分区
    【Linux】排序命令sort
  • 原文地址：https://www.cnblogs.com/jianjie/p/15120515.html
Copyright © 2011-2022 走看看