详解CSS（十一）

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：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>

背景图

img元素是属于HTNL的概念而背景图属于CSS的概念。

1. 当图片属于网页内容时，必须使用img元素

2. 当图片仅用于美化网页时，必须使用背景图

涉及的css属性

1. background-image

2. background-repeat

默认情况下，背景图会在横坐标和纵坐标中进行重复

3. background-size

预设值：contain、cover，类似于object-fit

数值或百分比

4. background-position

设置背景图的位置。

预设值：left、bottom、right、top、center

数值或百分比

雪碧图（精灵图）（spirit）

5. background-attachment

通常用它控制背景图是否固定。

6. 背景图与背景颜色混用

<!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>
    body{
      /* background-image: url("img/img3.jpg");
      background-repeat: no-repeat;
      /* background-size: 100%; */
      /* background-attachment: fixed;
      background-color: red; */
      background: url("img/img4.jpg") no-repeat 50% 50%/100% fixed #000;
      color: #fff;
    }
  </style>
</head>
<body>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut corporis, non at dolore inventore assumenda quae delectus ea deserunt officia similique minima provident mollitia exercitationem totam fuga magni labore libero excepturi cum! Exercitationem nemo nobis aperiam molestias cum vel quasi ullam pariatur delectus non sit, illum, laudantium quidem facere harum laborum nisi praesentium fugiat? Quam, deserunt! Praesentium corrupti sequi explicabo. Inventore aspernatur quis veniam minima ipsa perspiciatis recusandae dignissimos, in sint. Incidunt voluptatem ea minima deleniti totam ex explicabo consectetur amet quos est ducimus eius asperiores, aliquid ullam autem fuga ratione cum unde quae numquam beatae modi deserunt. Voluptate aliquam sed minus, quaerat a aspernatur impedit delectus saepe? Necessitatibus maxime libero eaque deleniti consequuntur ipsum repellendus totam sit, autem illo odit laborum distinctio eligendi ducimus iste harum illum quas in animi optio iusto, natus nobis asperiores. Nulla, fugit accusamus laborum omnis quas molestiae non suscipit totam recusandae, vel quae numquam praesentium in doloremque fugiat! Distinctio laborum hic dolorem, debitis aliquid sed cumque magnam mollitia? Dolorem optio provident recusandae ducimus facilis rem quis voluptatibus accusamus hic facere maiores omnis possimus similique dicta at quod delectus, exercitationem qui ratione pariatur? Vitae adipisci dolores fuga doloremque. Expedita rerum voluptate laborum et, quaerat reprehenderit dolorem facilis facere! Consequatur pariatur facilis minima atque tempora tempore voluptates, ab animi corporis velit esse iste asperiores quibusdam voluptatem magnam odio cum odit obcaecati temporibus mollitia sapiente facere? Aspernatur, omnis cupiditate! Obcaecati laudantium excepturi praesentium neque quas laborum vel eveniet optio perspiciatis dignissimos, suscipit dolorem corporis dolore autem eum asperiores pariatur? Esse deleniti cupiditate saepe, nostrum inventore molestias alias cumque! Eligendi doloremque voluptates tempore fuga impedit distinctio deleniti neque, ut rem magnam eveniet nam veniam mollitia! Voluptatum amet rerum eius at, sint expedita iure minima quibusdam? Eaque nostrum corporis laborum, repellendus laboriosam in illo illum, officia ea quaerat accusamus voluptatum distinctio iusto commodi sit aut delectus accusantium alias sint autem. Dolore officiis, eos magni ducimus excepturi delectus nesciunt eveniet itaque voluptas natus aperiam non eaque. Ducimus dolore incidunt facilis ipsa exercitationem culpa alias nihil repellat expedita reprehenderit nisi praesentium molestiae velit eligendi possimus, aliquid numquam maiores architecto aperiam impedit unde? Culpa quasi libero ullam consequatur illum suscipit vitae error quis, incidunt est! Consequatur laboriosam dolorum magnam vitae, eligendi rerum eos nemo necessitatibus molestiae quos, fugiat blanditiis architecto optio temporibus similique provident velit praesentium ex voluptatem ad facere sint ullam iusto! Aliquam omnis, quis deserunt id blanditiis dolorum corporis quos itaque hic, placeat rerum tempora fugiat sunt debitis quam. Perferendis aut sapiente porro, nostrum esse laboriosam sint ratione voluptatibus consectetur quos doloremque omnis est voluptates excepturi? Reiciendis consequuntur necessitatibus provident unde dolorum sunt veniam enim. Magni nisi eius porro harum perspiciatis dolores temporibus minus dolor officiis praesentium doloremque dolorum dignissimos pariatur id, libero architecto recusandae, ab deserunt repudiandae. Iure doloribus recusandae expedita commodi accusamus a architecto vero cum deserunt ut est natus consectetur, consequatur totam reprehenderit quis porro vel nihil sed officiis praesentium culpa. Quod suscipit, voluptates eaque at similique non dignissimos nisi ipsam impedit molestiae quo doloremque rem modi cum error voluptate excepturi accusantium explicabo? Praesentium sapiente vero consequuntur, corporis maxime suscipit consequatur sunt esse illo nesciunt dolor consectetur blanditiis tempora hic, doloribus numquam commodi. Sapiente libero, soluta facere dolorem optio consequatur in commodi quidem possimus, magni ab! Dolores expedita magni optio nulla, delectus mollitia aut aliquid veniam perferendis officia explicabo suscipit! Iure quos nobis non, minus necessitatibus deleniti esse! Explicabo cum incidunt nobis quisquam aliquam labore! Corrupti beatae, quidem consectetur voluptatem fuga doloribus! Eaque, mollitia molestias nostrum sunt quae quibusdam, nihil eum, sit voluptatem quas corporis. Quod adipisci at aliquid eos odit, doloribus labore architecto quidem deserunt et temporibus corporis ipsam pariatur magni cupiditate libero quam, dolores molestias vitae eveniet nam! Voluptatibus in reprehenderit quisquam ullam, harum omnis culpa, dolore, at officia eveniet aut eum. Voluptatum vero fugit nisi adipisci quia culpa in vel quos exercitationem nobis, eaque sapiente labore velit amet ullam dolorum a autem. Eaque deserunt unde quod voluptatum cum nam facere ex delectus consequuntur. Deserunt consequatur at nostrum dolorem, ab, eligendi quae odit, perferendis numquam dolore provident sed tempore fugiat ex praesentium pariatur temporibus? Delectus adipisci et maiores eum error quam pariatur esse doloremque debitis magni? Numquam, tenetur! Modi pariatur corporis libero itaque nostrum ab culpa odio ipsum reiciendis obcaecati doloribus, ratione nihil esse nulla? Maxime, voluptatem veritatis! Autem repellendus adipisci ut illum eligendi eaque placeat! Eum ipsam iusto consequuntur temporibus deserunt autem, tempora nisi pariatur. Quo beatae perferendis distinctio natus architecto, numquam perspiciatis doloremque dolor sunt optio laborum? Laudantium aut veniam laborum consequatur excepturi debitis expedita error? Ipsam quas non labore voluptate cum voluptas, nesciunt accusantium exercitationem quasi, libero itaque voluptatum enim dolore autem necessitatibus sequi, eius pariatur earum velit aperiam. Quibusdam, fugit dolorem aliquam ullam culpa commodi temporibus id veritatis error iste facere odio doloribus non vero, amet et suscipit voluptatem nemo consequatur quisquam aut eius necessitatibus. Nemo ullam, eveniet itaque praesentium omnis nulla quae nihil eligendi delectus dolorum aut obcaecati, laudantium quibusdam optio repudiandae commodi alias officia aliquid ad quidem sit facilis. Dolores perspiciatis assumenda recusandae commodi tempore eius non ea praesentium quia magni laboriosam repudiandae veniam blanditiis doloribus sapiente rem molestiae officia expedita autem, dicta facere quas. Fuga sapiente repudiandae ullam magni enim voluptates porro voluptate iusto itaque, explicabo velit labore quo sed dicta adipisci ipsum quibusdam fugiat, animi eum cum assumenda aut? Cumque omnis nobis repellat architecto iusto et recusandae odit perferendis enim ea, ullam vitae eius quo dolorum quidem possimus est animi eveniet magnam quasi quos iste, atque quaerat? Blanditiis molestiae inventore ipsum rerum corporis et assumenda cum fuga accusantium deleniti, voluptas eum autem mollitia minus nemo temporibus ipsa repellendus vel ab tempora eos impedit ipsam? Mollitia, sed. Laborum omnis perferendis molestias neque ipsa? Perspiciatis quod nulla libero odit similique perferendis optio inventore esse delectus. Distinctio unde, praesentium magni eaque eligendi totam. Perspiciatis fuga doloribus impedit sequi, nobis non voluptates nisi amet minima deleniti quo exercitationem iste fugiat maxime quae minus facere incidunt a perferendis possimus aliquam nostrum quidem esse? Deserunt ex sequi sint dolorem repellat voluptates nemo minus?
</body>
</html>