详解CSS（十一）

最新推荐文章于 2024-11-01 12:26:05 发布

2401_84620303

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量635

点赞数 19

文章标签： css 前端

本文链接：https://blog.csdn.net/2401_84620303/article/details/139838085

版权

涉及的css属性

伪类选择器

first-child(选中第一个子元素) first-of-type(选中子元素中第一个指定类型的元素)

last-child(选中最后一个子元素) last-of-type(选中子元素最后一个指定类型的元素)


<!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元素必须是第一个子元素 */

    a:first-child{

      color: red;

    }

    /* 选中的是子元素中第一个a元素 */

    a:first-of-type{

      color: red;

    }

    /* 选中的是a元素，必须是最后一个子元素 */

    a:last-child{

      color: green;

    }

    /* 选中子元素中最后一个a元素 */

    a:last-of-type{

      color: green;

    }

  </style>

</head>

<body>

  <div>

    <nav>

      <p>

        fnkaf

      </p>

      <a href="">Lorem.</a>

      <a href="">Commodi!</a>

      <a href="">Fuga.</a>

      <a href="">Eaque!</a>

      <a href="">Eos.</a>

      <a href="">Officiis?</a>

      <a href="">Nulla.</a>

      <a href="">Sunt.</a>

      <a href="">Ipsum.</a>

      <a href="">Atque.</a>

    </nav>

  </div>

</body>

</html>

nth-child(选中指定的第几个元素) even: 关键字，等同于2n; odd: 关键字，等同于2n+1

nth-of-type(选中指定的子元素第几个某类型的元素)


<!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:nth-child(5){

      color: red;

    } */

    a:nth-of-type(4){

      color: red;

    }

  </style>

</head>

<body>

  <nav>

    <p>

      sgs

    </p>

    <a href="">Lorem.</a>

    <a href="">Qui.</a>

    <p>ada</p>

    <p>caa</p>

    <a href="">Est!</a>

    <a href="">Soluta?</a>

    <a href="">Animi?</a>

    <a href="">Obcaecati?</a>

    <a href="">Reprehenderit.</a>

    <a href="">Dolorem?</a>

    <a href="">Obcaecati!</a>

    <a href="">Nostrum.</a>

  </nav>

</body>

</html>

伪元素选择器

first-letter(选中元素中的第一个字母)

first-line(选中元素中第一行的文字)

selection(选中被用户框选的文字)


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

    p::first-letter{

      color: red;

      font-size: 2em;

      font-weight: bold;

    }

    p::first-line{

      color: green

      ;

    }

  </style>

</head>

<body>

  <p>

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae quam omnis modi ipsam accusamus. Possimus, distinctio voluptatibus aliquid aliquam error dolor odit odio dolore, optio magnam at. Officia, esse assumenda.

  </p>

</body>

</html>


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

    p::selection{

      background: #008c8c;

      color: red;

    }

  </style>

</head>

<body>

  <p>

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae quam omnis modi ipsam accusamus. Possimus, distinctio voluptatibus aliquid aliquam error dolor odit odio dolore, optio magnam at. Officia, esse assumenda.

  </p>

</body>

</html>