前端之路（十一）—— CSS选择器

popping_Sun

已于 2022-03-10 09:15:51 修改

阅读量315

点赞数

分类专栏：前端之路文章标签：前端 css html html5 javascript

于 2022-03-08 17:35:03 首次发布

本文链接：https://blog.csdn.net/popping_sun/article/details/123353446

版权

前端之路专栏收录该内容

12 篇文章 1 订阅

订阅专栏

在上一节中我们学习了CSS语法及如何引入CSS文件，这一小节，我们来学习CSS重要的两个选择器——id和class选择器。

通过上一节我们知道要想把一段落字体变成红色，我们可以在<head></head>元素利用<style></style>标签。

<!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 {
        /* 设置字体为红色 */
        color: red;
      }
    </style>
  </head>
  <body>
    <p>大娃，力大无穷</p>
    <p>二娃，耳聪目明</p>
    <p>三娃，铜墙铁壁</p>
  </body>
</html>

打开页面会发现，我们写的三个段落里面的字体都是红色，这时候产品经理提需求不要三个都是红色，要大娃是红色，加粗；二娃是橙色，变斜；三娃是黄色，有下划线。这个时候该怎么写样式呢？有人可能会想到直接在标签前面加上style写上这些属性也就是行内样式，有这个想法的是很棒的！

<!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 {
        /* 设置字体为红色 */
        color: red;
      }
    </style>
  </head>
  <body>
    <p style="color: red; font-weight: bold">大娃，力大无穷</p>
    <p style="color: orange; font-style: italic">二娃，耳聪目明</p>
    <p style="color: yellow; text-decoration: underline">三娃，铜墙铁壁</p>
  </body>
</html>

利用行内样式我们达到了这个效果，在这里有些人可能会疑惑style里面的属性还在，但是p元素不受影响，这是为什么呢？这个就涉及到优先级问题，现在我们记住行内样式优先级大于style里面的样式。关于优先级详细内容可以看下CSS创建这一小节。

到了这打开页面，会发现黄色在白色背景下不显眼，这是产品经理有发话了，‘我要三娃跟大娃样式一样’。为了达到这个需求我们可以继续用行内样式，但如果后续有四娃、五娃等等也要求这样代码就有很多重复了，而且当一个样式要求变多时，再用行内样式就不太好维护了。所以我们要换种方式，也就是本节主角——选择器。

Id和Class选择器

我们可以通过选择器设置样式，选择器分为两种一种是id，一种是class。我们需要记住id优先级大于class选择器。

Id选择器：id选择器可以为标有特定id的元素设置样式，在书写CSS样式时需要在对应id名前面加上‘#’。

<!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>
      /* id选择器 */
      #p1 {
        color: red;
        font-weight: bold;
      }
      p {
        /* 设置字体为红色 */
        color: red;
      }
    </style>
  </head>
  <body>
    <p style="color: red; font-weight: bold">大娃，力大无穷</p>
    <p style="color: orange; font-style: italic">二娃，耳聪目明</p>
    <p id="p1">三娃，铜墙铁壁</p>
  </body>
</html>

Class选择器：描述一组元素样式，在书写是需要在对应class名前面加上点‘.’表示。

<!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>
      /* id选择器 */
      #p1 {
        color: red;
        font-weight: bold;
      }
      /* class选择器 */
      .p2 {
        color: red;
        font-weight: bold;
      }
      p {
        /* 设置字体为红色 */
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="p2">大娃，力大无穷</p>
    <p style="color: orange; font-style: italic">二娃，耳聪目明</p>
    <p class="p2">三娃，铜墙铁壁</p>
  </body>
</html>

Id和Class区别

通过上面对选择器的描述我们可以总结出来，id是给特别id的元素设置样式的，它是对单个元素而言的，class是对一组的，所有它可以重复使用，也正因如此，它也被称为类选择器。正如我们前面提到过的，id选择器优先级要比class选择器高。学到这产品经理有提到最后一个要求，就是把大娃、三娃都变成蓝色，我们一起用id选择器实现下。

<!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>
      /* id选择器 */
      #p1 {
        color: skyblue;
      }
      #p3 {
        color: skyblue;
      }
      /* class选择器 */
      .p2 {
        color: red;
        font-weight: bold;
      }
      p {
        /* 设置字体为红色 */
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="p1" class="p2">大娃，力大无穷</p>
    <p style="color: orange; font-style: italic">二娃，耳聪目明</p>
    <p id="p3" class="p2">三娃，铜墙铁壁</p>
  </body>
</html>

这里我们为了体现出来id优先级高，就将id与class混用了。一般我们用class类选择器就可以啦。

popping_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之路（十一）—— CSS选择器

在上一节中我们学习了CSS语法及如何引入CSS文件，这一小节，我们来学习CSS重要的两个选择器——id和class选择器。通过上一节我们知道要想把一段落字体变成红色，我们可以在<head></head>元素利用<style></style>标签。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <.
复制链接

扫一扫

专栏目录