06-偽類和偽元素

村里唯一的运维發表於2024-06-11

01-偽類

1.1 元素狀態的概念

image

程式碼示例

<!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>
image

滑鼠移動上去的時候會變成紅色

1.2 常見的偽類

image

02-結構偽類

2.1 常用結構偽類

2.1.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>
image

2.1.2 nth-child(2n)

n表示任意正整數和0

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(2n){
         color: red;
      }
   </style>
</head>
<body>
   <ul>
      <li>元素1</li>
      <li>元素2</li>
      <li>元素3</li>
      <li>元素4</li>
   </ul>
</body>
</html>
image

2) 取奇數

<!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>
image

3) 取前幾個

<!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>
image

4) 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>
image

2.2 nth-of-type和nth-child的區別

image

程式碼示例說明
需求: 取倒數第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>
image

如果中間有別的元素該如何取？還用上述程式碼是取不到的
修改程式碼

<!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>
image

2.3 否定偽類

image

程式碼示例

<!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>
image

03 動態偽類

image 
<!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>

04 偽元素

預設情況下,偽元素是行內非替換元素[該元素設定寬高是無效的]

4.1 常見偽元素

image

4.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>

控制第一行的樣式，第一行的長度它會自己判斷
image

4.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>
image

4.4 before和after

image 
<!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>
image 
<!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>
image

4.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>
image

如果把content省略了,這個框就直接沒有了

相關文章