从 HTML 到 CSS：开启网页样式之旅（二）—— 深入探索 CSS 选择器的奥秘

前言
一、CSS基本选择器
- 1. 通配选择器
- 2. 元素选择器
- 3. 类选择器
- 4. id选择器
- 5.基本选择器总结
二、CSS复合选择器
- 1. 后代选择器
- 2. 子选择器
- 3. 相邻兄弟选择器
- 4.交集选择器
- 5.并集选择器
- 6.属性选择器
- - （1）选择具有指定属性的元素
  - （2）选择具有指定属性且属性值等于特定值的元素
  - （3）选择具有指定属性且属性值包含特定值
  - （4）选择具有指定属性且属性值以特定值开头（后面可以跟一个连字符 “-”）的元素。
  - （5）选择具有指定属性且属性值以特定值开头的元素
  - （6）选择具有指定属性且属性值以特定值结尾的元素
- 7.伪类选择器
- - 常见的伪类选择器及示例
  - （1）:hover
  - （2）:active
  - （3）:focus
  - （4）:first - child
  - （5）:last - child
  - （6）:nth - child(n)
  - （7）:visited
  - （8）常用的
- 8.伪元素选择器
三、选择器的优先级
- 1. 优先级基本规则
- 2. 计算优先级（特异性）

前言

在上一节内容中，我们初步了解了CSS如何引用以及其基本语法规范，接下来要深入探究的便是CSS选择器这一关键部分。
CSS选择器犹如一把精准的钥匙，能够帮助我们准确地定位到HTML页面中需要添加样式的元素，从而实现对网页样式的精细控制。

下面，就让我们一同揭开CSS选择器的神秘面纱，深入了解其丰富多样的类型和强大功能

一、CSS基本选择器

1. 通配选择器

通配选择器可以选中所有HTML中的元素

语法


* {
属性名: 属性值;
}

例如

<!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>
        /* 选中所有元素 */
        * {
            color: orange;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div>
        <P>张三 ：98</P>
        <P>张三 ：96</P>
        <P>张三 ：99</P>
        <P>张三 ：97</P>
    </div>
</body>

</html>

效果图

在这里插入图片描述

备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助

2. 元素选择器

作用：为页面中某种元素统一设置样式。

语法：

标签名 
{ 

属性名: 属性值;
}

举例

/* 选中所有段落元素 */
<style>
      p {
        color: blue;
        font-size: 60px;
      }
    </style>
  </head>

  <body>
    <span>2</span>
    <div>
      <p>张三 ：98</p>
      <p>张三 ：96</p>
      <p>张三 ：99</p>
      <p>张三 ：97</p>
    </div>

效果图
在这里插入图片描述

元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样

3. 类选择器

作用：根据元素的class 值，来选中某些元素。

可以选中具有特定类名的 HTML 元素，这使得我们能够针对具有相同类别的元素进行样式设置，实现一定程度的差异化和复用性
语法：

.类名 {
    属性名: 属性值;
}

举例：

<!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>
        /* 定义一个名为highlight的类选择器样式 */
      .highlight {
            color: green;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>
        <p class="highlight">张三 ：98</p>
        <p>张三 ：96</p>
        <p class="highlight">张三 ：99</p>
        <p>张三 ：97</p>
    </div>
</body>

</html>

效果图

4. id选择器

id 选择器用于选中具有特定 id 属性值的 HTML 元素，在一个 HTML 页面中，每个 id 值应该是唯一的，它主要用于对特定的、独一无二的元素进行精准的样式设置或其他操作（比如==通过 JavaScript ==进行交互操作时，常通过 id 来精准定位元素）
语法

#id名 {
    属性名: 属性值;
}

举例

<!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>
        /* 定义一个名为unique-element的id选择器样式 */
        #unique-element {
            color: purple;
            background-color: yellow;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div>
        <p id="unique-element">张三 ：98</p>
        <p>张三 ：96</p>
        <p>张三 ：99</p>
        <p>张三 ：97</p>
    </div>
</body>

</html>

在这个例子中，我们通过#unique-element这个 id 选择器定义了特定的样式，只有那个 id 属性值为unique-element的<p>元素会应用这些样式，其他元素不受影响。

效果图

5.基本选择器总结

在这里插入图片描述

二、CSS复合选择器

CSS 复合选择器是由基本选择器通过特定的组合方式构成的，它能够更加精准地定位到我们想要设置样式的元素，满足更复杂的页面样式设计需求

1. 后代选择器

后代选择器用于选择某元素的所有后代元素（包括子元素、孙元素等）并设置样式

语法：

祖先元素 后代元素 {
    属性名: 属性值;
}

举例：

<!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>
        /* 选择div元素下的所有p元素 */
        div p {
            color: red;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div>
        <p>张三 ：98</p>
        <p>张三 ：96</p>
        <span>
            <p>张三 ：99</p>
        </span>
        <p>张三 ：97</p>
    </div>
    <p>这是div外的p元素，不受上述样式影响</p>
</body>

</html>

在上述代码中，通过div p这个后代选择器，我们为<div>元素内部的所有<p>元素设置了特定的样式（红色文字，字体大小为 25px），而位于<div>元素外部的<p>元素则不会应用这些样式
在这里插入图片描述

2. 子选择器

子选择器用于选择某元素的直接子元素并设置样式，它与后代选择器的区别在于只针对直接子元素，不包括孙元素及更后代的元素

父元素 > 子元素 {
    属性名: 属性值;
}

<style>
        /* 选择div元素的直接子p元素 */
        div > p {
            color: cyan;
            font-size: 28px;
        }
    </style>
<div>
        <p>张三 ：98</p>
        <p>张三 ：96</p>
        <span>
            <p>张三 ：99</p>
        </span>
        <p>张三 ：97</p>
    </div>
    <p>这是div外的p元素，不受上述样式影响</p>

在这里插入图片描述

3. 相邻兄弟选择器

相邻兄弟选择器用于选择紧挨着某元素的下一个兄弟元素并设置样式

元素 + 相邻兄弟元素 {
    属性名: 属性值;
}

举例：

 <style>
        /* 选择p元素紧挨着的下一个p元素 */
        p + p {
            color: magenta;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>张三 ：98</p>
    <p>张三 ：96</p>
    <p>张三 ：99</p>
    <p>张三 ：97</p>
</body>

在这里插入图片描述

大家想一想第一个为什么显示不出来呢

第一个<p>元素（张三 : 98）没有紧挨着它的前一个<p>元素，因为它是第一个<p>元素。
从第二个<p>元素（张三 : 96）开始，它是第一个<p>元素（张三 : 98）的下一个兄弟元素，所以它会应用p + p选择器的样式

4.交集选择器

交集选择器是由两个或多个选择器通过紧挨着书写来构成的，它会选择同时满足这些选择器条件的元素。只有当一个元素匹配所有组成交集选择器的选择器时，该元素才会被选中并应用样式

语法格式为

选择器1选择器2{属性名:属性值;}

举例

<style>
    p.highlight {
      color: green;
      font - weight: bold;
    }
  </style>
</head>
<body>
  <p class="highlight">这是一段带有highlight类的段落，会应用样式。</p>
  <p>这是一段普通段落，不会应用样式。</p>
  <span class="highlight">这是一个带有highlight类的span元素，不会应用样式，因为它不是段落元素。</span>
</body>

在这里插入图片描述

5.并集选择器

并集选择器用于同时选择多个不同的元素，并为它们设置相同的样式。

语法格式为：
选择器1,选择器2,选择器3{属性名:属性值;}

举例

 p,span{
      color: red;
      font - size: 20px;
    }
  </style>
</head>
<body>
  <p>这是一个段落。</p>
  <span>这是一个span元素。</span>
  <div>这是一个div元素，不受影响。</div>
</body>

在这里插入图片描述

6.属性选择器

属性选择器是 CSS 中用于根据元素的属性及其属性值来选择元素的一种选择器。它允许你通过检查 HTML 元素是否具有特定属性或特定属性值来选择元素，并为其设置样式

（1）选择具有指定属性的元素

[title] {
  color: green;
}
<p title="这是一个段落">这是有title属性的段落</p>
<p>这是没有title属性的段落</p>

在这里插入图片描述

（2）选择具有指定属性且属性值等于特定值的元素

<style>
        [class="highlight"] {
            color: red;
            font - weight: bold;
        }

        <p title="这是一个段落">这是有title属性的段落</p><p>这是没有title属性的段落</p>
    </style>
</head>
<p class="highlight">这是带有highlight类的段落</p>
<p class="other">这是带有other类的段落</p>

在这里插入图片描述

[attribute~ = value]

（3）选择具有指定属性且属性值包含特定值

 [class ~= "important"] {
  background-color: yellow;
}

    </style>
</head>
<p class="important urgent">这个段落有important和urgent类</p>
<p class="urgent">这个段落只有urgent类</p>

在这里插入图片描述

[attribute| = value]

（4）选择具有指定属性且属性值以特定值开头（后面可以跟一个连字符 “-”）的元素。

<!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>
        [lang|="en"] {
            font-style: italic;
        }
    </style>
</head>

<body> 
    <p lang="en">这是英文段落</p>
    <p lang="en-us">这是美式英文段落</p> 
    <p lang="fr">这是法文段落</p>
</body>

</html>

在这里插入图片描述

（5）选择具有指定属性且属性值以特定值开头的元素

[attribute^ = value]

<!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>
       [href ^= "https://"] {
  color: blue;
}
    </style>
</head>

<body> 
    <a href="https://www.example.com">这是一个https链接</a>
<a href="http://www.other.com">这是一个http链接</a>
</body>

</html>

在这里插入图片描述

（6）选择具有指定属性且属性值以特定值结尾的元素

[attribute* = value]

[src$ = ".jpg"] {
  border: 1px solid red;
}
<img src="image.jpg" alt="这是JPG图片">
<img src="image.png" alt="这是PNG图片">

在这里插入图片描述

7.伪类选择器

伪类选择器是 CSS 中一种特殊的选择器，它根据元素的特定状态或位置等条件来选择元素，而不是基于元素的实际标记或属性。通过伪类选择器，可以为处于不同状态下的元素设置不同的样式，增强用户交互体验

常见的伪类选择器及示例

（1）:hover

当鼠标悬停在元素上时应用样式

<!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>
        a:hover {
            color: orange;
        }
    </style>
</head>

<body>
    <a href="#">这是一个链接</a>
</body>

</html>

当鼠标悬停在<a>链接元素上时，其文字颜色会变成橙色。

在这里插入图片描述

（2）:active

当元素被激活时（例如被点击时）应用样式

<!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: yellow;
        }
    </style>
</head>

<body>
    <button>点击我</button>
</body>

</html>

当按钮被点击（按下鼠标键）时，其背景颜色会变成黄色

在这里插入图片描述

（3）:focus

当元素获得焦点时（例如表单元素被选中准备输入时）应用样式

<!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>
        input:focus {
            border: 2px solid blue;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

</html>

当<input>文本框获得焦点（用户点击准备输入）时，其边框会变成 2px 宽的蓝色边框

（4）:first - child

选择元素的第一个子元素

<!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>
        ul li:first-child {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <ul>
        <li>第一个列表项</li>
        <li>第二个列表项</li>
        <li>第三个列表项</li>
    </ul>
</body>

</html>

在无序列表<ul>中，第一个<li>列表项的文字会加粗显示

（5）:last - child

选择元素的最后一个子元素

<!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>
        ol li:last-child {
            color: green;
        }
    </style>
</head>

<body>
    <ol>
        <li>第一个有序列表项</li>
        <li>第二个有序列表项</li>
        <li>第三个有序列表项</li>
    </ol>
</body>

</html>

在有序列表<ol>中，最后一个<li>列表项的文字颜色会变成绿色

（6）:nth - child(n)

选择元素的第 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>
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <table>
        <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
        <tr><td>第二行第一列</td><td>第二行第二列</td></tr>
        <tr><td>第三行第一列</td><td>第二行第二列</td></tr>
    </table>
</body>

</html>

在表格
中，偶数行（第 2、4、6 等行）的元素背景颜色会变成浅灰色（#f2f2f2）

（7）:visited

当链接被访问过之后应用样式

<!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>
        a:visited {
            color: purple;
        }
    </style>
</head>

<body>
    <a href="https://www.example.com">这是一个链接</a>v
</body>

</html>

当用户访问过<a>链接指向的网址后，再次看到该链接时，其文字颜色会变成紫色

在这里插入图片描述

（8）常用的

在这里插入图片描述

8.伪元素选择器

作用：选中元素中的一些特殊位置

在这里插入图片描述

三、选择器的优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

到底应用哪个样式，此时就需要看优先级了

1. 优先级基本规则

内联样式大于
id 选择器大于
类选择器和伪类选择器大于
元素选择器

2. 计算优先级（特异性）

除了上面根据选择器类型判断优先级，还可以通过计算特异性来更准确确定优先级。

id 选择器：每有一个 id 选择器，特异性值加 100。
类选择器、伪类选择器、属性选择器：每有一个，特异性值加 10。
元素选择器、伪元素选择器：每有一个，特异性值加 1。
比如选择器组合#mainDiv.myClass p:hover，
这里有 1 个 id 选择器#mainDiv（特异性值 100）、
1 个类选择器.myClass（特异性值 10）、
1 个伪类选择器p:hover（特异性值 10），
总共特异性值是 120。

当和其他选择器比较对同一个元素设置样式时，特异性值高的那个选择器的样式会优先应用

本节内容到此结束，喜欢的话记得三连哦

在这里插入图片描述

从 HTML 到 CSS：开启网页样式之旅（二）—— 深入探索 CSS 选择器的奥秘

从 HTML 到 CSS：开启网页样式之旅（二）—— 深入探索 CSS 选择器的奥秘

前言

一、CSS基本选择器

1. 通配选择器

2. 元素选择器

3. 类选择器

4. id选择器

5.基本选择器总结

二、CSS复合选择器

1. 后代选择器

2. 子选择器

3. 相邻兄弟选择器

4.交集选择器

5.并集选择器

6.属性选择器

（1）选择具有指定属性的元素

（2）选择具有指定属性且属性值等于特定值的元素

（3）选择具有指定属性且属性值包含特定值

（4）选择具有指定属性且属性值以特定值开头（后面可以跟一个连字符 “-”）的元素。

（5） 选择具有指定属性且属性值以特定值开头的元素

（6）选择具有指定属性且属性值以特定值结尾的元素

7.伪类选择器

常见的伪类选择器及示例

（1）:hover

（2）:active

（3）:focus

（4）:first - child

（5）:last - child

（6）:nth - child(n)

（7）:visited

（8）常用的

8.伪元素选择器

三、选择器的优先级

1. 优先级基本规则

2. 计算优先级（特异性）

相关文章

（5）选择具有指定属性且属性值以特定值开头的元素