CSS基础入门：关于选择器的全面解析

少年姜太公
258 阅读6分钟

何为CSS？

CSS（Cascading Style Sheets）又叫作层叠样式表，是一种用于描述HTML或XML文档外观和格式的语言。 它允许开发者控制网页的布局、颜色、字体和其他视觉效果，使页面更加美观和易用。CSS的主要目的是将内容（HTML）与表现（样式）分离，从而提高代码的可维护性和可读性，是前端开发中不可或缺的一部分。

CSS引入方式

  • 内联样式：直接在HTML标签中使用style属性。 
    <p style="color: blue;">这是一个段落。</p>
  • 内部样式：在HTML文档的<head>部分使用<style>标签。 
    <style>
  p { color: blue; }
</style>
  • 外联样式：将CSS代码保存在一个单独的.css文件中，并通过<link>标签引入。 
    <link rel="stylesheet" href="styles.css">

在工作时，一般是使用外联样式，这样可以方便团队开发时大家各司其职，而单独练习时我们可以通过内部样式将css放在<head>里，方便修改。

CSS优先级

CSS优先级决定了当多个规则应用于同一元素时，哪个规则会被应用。优先级从小到大依次为：

  • 标签选择器：1
  • 类选择器、属性选择器和伪类选择器：10
  • ID选择器：100
  • 行内样式：1000
  • !important：最大

当选择器变得复杂时，优先级会进行加法计算。例如： .container ul li:nth-child(odd) 的优先级得分为 22 (10 + 1 + 10 + 1)，:nth-child(odd)是一个伪类选择器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    p {
      color: blue !important;
    }
    .container p {
      color: red;
    }
    #main p {
      color: green;
    }
  </style>
</head>
<body>
  <div id="main" class="container">
    <p style="color: pink;">这是一段美好的爱情故事</p>
  </div>
</body>
</html>
image.png

在这个例子中，p标签里的字的颜色最终显示为蓝色，就是因为!important的优先级为最高

CSS选择器分类

css选择器可以分为基础选择器、组合选择器、伪类选择器、伪元素选择器和属性选择器，下面让笔者一一讲给你听啊

基础选择器

  • 标签选择器：选择具有特定标签名的所有元素，有h1,p,div,span,a等

  • 类选择器：选择具有特定类名的所有元素，就是标签里的class，用.类名来表示，上面代码中的.container就是一个类选择器

  • ID选择器：选择具有特定ID的所有元素，用#类名来表示，上面代码中的#main就是一个ID选择器。

  • 通配符选择器：选择所有元素，用*表示

组合选择器

  • 后代选择器：选择某个元素的所有后代元素。

  • 子元素选择器：选择某个元素的所有直接子元素。

  • 相邻兄弟选择器：选择紧接在另一个元素后的元素，只会选择跟在后面的第一个元素，其他的相同元素并不会有。

  • 普通兄弟选择器：选择前面有另一个元素的所有元素。

注意： 当多个规则具有相同的选择器优先级和来源时，后面的规则会覆盖前面的规则。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器</title>
  <style>
    /* 相邻兄弟选择器 连着 */
    h1 + p {
      color: red;
    }
    /* 兄弟选择器 */
    h1 ~ p {
      color: blue;
    }
    /* 子元素选择器 */
    .container > p {
      font-weight: bold;
    }
    .container p {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>标题</h1>
    <p>这是第一段文字</p>
    <p>这是第二段文字</p>
    <a href="">链接</a>
    <span>这是一个span元素</span>
    <div class="inner">
      <p>这是一个内部的段落</p>
    </div>
  </div>
</body>
</html>
image.png image.png

完整的代码执行时，输出结果是第一张图，因为后面的h1 ~ p { color: blue; }的蓝色把前面h1 + p { color: red; }的红色覆盖掉了，而如果把h1 ~ p { color: blue; }这个兄弟选择器删掉时打印的结果就是第二张图。

伪类选择器和伪元素选择器

伪类选择器用于选择处于特定状态的元素，如用户交互状态，常见的伪类选择器主要有以下几个：

  • :hover：鼠标悬停时。

  • :active：元素被激活时（如按钮被点击）。

  • :focus：元素获得焦点时。

  • :checked：复选框或单选按钮被选中时。

伪元素选择器用于选择元素的特定部分。

  • ::before 和 ::after：在内容前或后插入生成的内容。

  • ::first-letter：选择元素的第一个字母。

  • ::selection 用于选择文档中被用户选中的文本部分。通过这个选择器，你可以自定义选中文本的样式，例如背景颜色和文字颜色。

    下面看一下代码案例

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 伪类选择不同的状态 */
      button:active {
        background-color: red;
        color: white;
      }
      p:hover {
        background-color: yellow;
      }
      ::selection {
        background-color: blue;
        color: white;
      }
      input:focus {
        border: 2px solid blue;
      }
      input:checked + label {
        color: blue;
      }
      li:nth-child(odd) {
        background-color: lightgray;
      }
      li:not(:last-child) {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>伪类选择器示例</h1>
      <button>点击我</button>
      <p>鼠标悬浮在这里</p>
      <input type="text" placeholder="输入框">
      <input type="checkbox" id="option1">
      <label for="option1">选项1</label>
      <input type="checkbox" id="option2" checked>
      <label for="option2">选项2</label>
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
      </ul>
    </div>
  </body>
  </html>

    在这个例子中：

    • button:active 当按钮被激活时，背景色变为红色，文字颜色变为白色。

    • p:hover 当鼠标悬浮在<p>上时，背景色变为黄色。

    • ::selection 当文本被选中时，背景色变为蓝色，文字颜色变为白色。

    • input:focus 当输入框获得焦点时，边框变为蓝色实线。

    • input:checked + label 当复选框被选中时，紧跟其后的<label>文字颜色变为蓝色。

    • li:nth-child(odd) 选择奇数位置的<li>，背景色变为浅灰色。

    • li:not(:last-child) 选择非最后一个<li>，底部添加10像素的间距。

    结果如下图所示：

    image.png
属性选择器

属性选择器用于选择具有特定属性的元素。

  • [attribute]：选择具有指定属性的元素。 
    [target] { color: red; }
  • [attribute=value]：选择具有指定属性且值等于给定值的元素。 
    [target=_blank] { color: blue; }

nth-child vs nth-of-type

  • nth-child(n)： 选择器匹配属于其父元素的第 n 个子元素，不论该元素的类型是什么。
  • nth-of-type(n)： 选择器匹配属于其父元素的第 n 个特定类型的子元素
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 顺序 */
    .container p:nth-child(3) {
      background-color: yellow;
      color: black;
    }
    /* of-type */
    .container p:nth-of-type(3) {
      background-color: lightblue;
      color: black;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>nth-child vs nth-of-type 例子</h1>
    <p>这是一个段落</p>
    <div>这是一个div</div>
    <p>这是第二个段落</p>
    <p>这是第三个段落</p>
    <div>这是第二个div</div>
  </div>
</body>
</html>

在这个例子中：

  • .container p:nth-child(3) 选择<div class="container">中的第三个子元素，如果它是<p>，则背景色变为黄色。
  • .container p:nth-of-type(3) 选择<div class="container">中的第三个<p>，无论它的实际位置如何，背景色变为浅蓝色。运行结果如下：
image.png

如果觉得这篇文章对你有用的话，点个赞吧。

c224676594aae6804009e3fe521b122.jpg
avatar
文章
阅读
粉丝