06-伪类和伪元素

已注销
31 阅读3分钟

01 元素状态的概念

00046.png 代码示例

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

00047.png 鼠标移动上去的时候会变成红色

02 常见的伪类

00048.png

03 结构伪类

3.1 常用结构伪类

nth-child(1)

父元素中的第1个子元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul li:nth-child(1){
        color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>元素1</li>
      <li>元素2</li>
      <li>元素3</li>
      <li>元素4</li>
    </ul>
  </body>
</html>

00049.png

nth-child(2n)

n表示任意正整数和0

  • 取偶数
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      ul li:nth-child(2n){
         color: red;
      }
   </style>
</head>
<body>
   <ul>
      <li>元素1</li>
      <li>元素2</li>
      <li>元素3</li>
      <li>元素4</li>
   </ul>
</body>
</html>

00050.png

  • 取奇数
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      ul li:nth-child(2n +1){
         color: red;
      }
   </style>
</head>
<body>
   <ul>
      <li>元素1</li>
      <li>元素2</li>
      <li>元素3</li>
      <li>元素4</li>
   </ul>
</body>
</html>

00051.png

  • 取前几个
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      ul li:nth-child(-n +3){
         color: red;
      }
   </style>
</head>
<body>
   <ul>
      <li>元素1</li>
      <li>元素2</li>
      <li>元素3</li>
      <li>元素4</li>
   </ul>
</body>
</html>

00052.png

nth-last-child

用法和nth-child一样的，只不过是倒过来了而已

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      ul li:nth-last-child(-n +3){
         color: red;
      }
   </style>
</head>
<body>
   <ul>
      <li>元素1</li>
      <li>元素2</li>
      <li>元素3</li>
      <li>元素4</li>
   </ul>
</body>
</html>

00053.png

3.2 nth-of-type和nth-child的区别

00054.png 代码示例 需求: 取倒数第3个div元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box > div:nth-child(3) {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
  </div>
</body>
</html>

00055.png 如果中间有别的元素该如何取？还用上述代码是取不到的 修改代码

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

  </style>
</head>
<body>
  <div class="box">
    <div>div1</div>
    <p>p元素</p>
    <span>span元素</span>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
  </div>
</body>
</html>

00056.png

3.3 否定伪类

00057.png 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      ul :not(.yfc) {
         color: red;
      }
   </style>
</head>
<body>
   <ul>
      <li class="item">元素1</li>
      <li class="item">元素1</li>
      <li class="yfc">元素1</li>
      <li class="item">元素1</li>
   </ul>
</body>
</html>

00058.png

04-动态伪类

00059.png

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      /* a元素的链接从来没有被访问过 */
      a:link {
         color: red;
      }
      /* a元素被访问过来的颜色 */
      a:visited {
         color: green;
      }
      /* a元素聚焦 */
      a:focus {
         color: orange;
      }
      /* a元素鼠标放在上面 */
      a:hover {
         color: aqua;
      }
      /* 点下去来,还没有松手 */
      a:active {
         color: blue;
      }
   </style>
</head>
<body>
   <a href="http://www.mi.com">小米</a>
</body>
</html>

05-伪元素

默认情况下,伪元素是行内非替换元素[该元素设置宽高是无效的]

5.1 常见伪元素

00060.png

5.2 first-line

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box {
         color: red;
         width: 500px;
         background-color: blue;
         font-size: 20px;
      }
      .box::first-line {
         font-size: 30px;
         color: orange;
      }
   </style>
</head>
<body>
   <div class="box">
         独库公路的春夏秋冬是立体的，从沟谷里的野花烂漫，到山坡上的云杉阴翳清凉，再到半山腰荒芜的乱石穿空，最后升至峰巅的白雪皑皑，一眼便可阅尽所有时令，
         犹如吃快餐般便捷。而独库公路的季节又分明被拉长了，散布在风格迥异的景色之中，仿佛是上了一桌满汉全席，让你慢慢去品味
   </div>
</body>
</html>

控制第一行的样式，第一行的长度它会自己判断 00061.png

5.3 first-letter

对首字母进行设置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box {
         color: red;
         width: 500px;
         background-color: blue;
         font-size: 20px;
      }
      .box::first-line {
         font-size: 30px;
         color: orange;
      }
      .box::first-letter {
         font-size: 50px;
         color: black;
      }
   </style>
</head>
<body>
   <div class="box">
         独库公路的春夏秋冬是立体的，从沟谷里的野花烂漫，到山坡上的云杉阴翳清凉，再到半山腰荒芜的乱石穿空，最后升至峰巅的白雪皑皑，一眼便可阅尽所有时令，
         犹如吃快餐般便捷。而独库公路的季节又分明被拉长了，散布在风格迥异的景色之中，仿佛是上了一桌满汉全席，让你慢慢去品味
   </div>
</body>
</html>

00062.png

5.4 before和after

00063.png

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box::before {
         content: "123";
         color: green;
         font-size: 30px;
      }
      .box::after {
         content: "456";
         color: orange;
         font-size: 40px;
      }
   </style>
</head>
<body>
   <div class="box">我是box</div>
</body>
</html>

00064.png

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box::before {
         content: "123";
         color: green;
         font-size: 30px;
      }
      .box::after {
         content: "456";
         color: orange;
         font-size: 40px;
      }
      .item::after {
         content: url("./images/hot.svg");
         position: relative;
         left: 5px;
         top: 2px;
      }
   </style>
</head>
<body>
   <div class="box item">我是box</div>
</body>
</html>

00065.png

5.5 content不能省略

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box1::after {
         content: "";
         display: inline-block;
         width: 8px;
         height: 8px;
         background-color: blue;
      }
   </style>
</head>
<body>
   <div class="box1">box1</div>
</body>
</html>

00066.png 如果把content省略了,这个框就直接没有了

avatar
文章
阅读
粉丝