CSS（二）-- 选择器的运用（针对基本选择器和复合选择器的详细解析）-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS（二）-- 选择器的运用（针对基本选择器和复合选择器的详细解析）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 选择器的作用

2. 选择器的分类

3. 基本选择器

3.1 标签选择器

3.2 类选择器

3.3 id 选择器

小拓展：

3.4 通配符选择器

小总结：

4. 复合选择器（记忆）

4.1 子代选择器

4.2 后代选择器

小拓展：

4.3 交集选择器

4.4 并集选择器

1. 选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

2. 选择器的分类

基本选择器：根据元素（注： 这里的元素指的就是标签）标签的名称、类名、ID 等属性进行选择，包括标签选择器、类选择器、ID 选择器等。

复合选择器：用于组合多个选择器进行选择，包括后代选择器、子代选择器等。

伪类选择器：选择指定状态的元素，例如 a:hover 选择鼠标悬停在链接上的 a 元素。

伪元素选择器：选择元素的特定部分而不是整个元素本身，包括 ::before 伪元素选择器、 ::after 伪元素选择器、 ::first-letter 伪元素选择器、 ::first-line 伪元素选择器等。

3. 基本选择器

3.1 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

基本语法如下：
标签名 {
属性1:  属性值1;
属性2:  属性值2;
属性3:  属性值3;
...
}
作用：

标签选择器可以把某一类标签全部选择出来，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。比如所有的 <div> 标签和所有的 <span> 标签。

优点：

能快速为页面中同类型的标签统一设置样式。

缺点：

不能设计差异化样式，只能选择全部的当前标签。

3.2 类选择器

根据标签的类名进行选择，类名由标签的class属性定义，基本语法如下：
.类名 {
属性1: 属性值1;
..
}
例如，将所有拥有 red 类的 HTML 元素均为红色。
.red{
      color: red;
    }
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。

注意：

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。可以理解为给这个标签起了一个名字，来表示。

长名称或词组可以使用中横线来为选择器命名。

不要使用纯数字、中文等命名，尽量使用英文字母来表示。

命名要有意义，尽量使别人一眼就知道这个类名的目的。

3.3 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

基本语法如下：
#id名 {

属性1: 属性值1;
...
}
例如，将 id 为 nav 元素中的内容设置为红色。
#nav { 
        color:red;
 }
注意：id 属性值只能在每个 HTML 文档中出现一次。

小拓展：

id选择器和类选择器的区别：

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

id 选择器和类选择器最大的不同在于使用次数上。

类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常JavaScript 搭配使用。

3.4 通配符选择器

通配符选择器使用 * 来表示匹配所有的 HTML 元素，它匹配文档中的所有元素。

基本语法如下:
* {
属性1: 属性值1;
...
}
实例演示;
* {
margin: 0;
padding: 0;
}
这段样式规则会将所有元素的 margin 和 padding 属性设置为 0。使用通配符选择器可以很方便地对整个页面应用样式，但是它的性能可能会受到影响。因为它会对文档中的所有元素都进行匹配，包括嵌套在其他元素中的元素，所以可能会导致页面加载和渲染的速度变慢。因此，尽量避免在样式规则中使用通配符选择器，而是应该尽可能准确地指定需要样式化的元素，以提高效率和性能。

小总结：

基本选择器 作用特点 使用情况 用法

标签选择器可以选择所有相同标签不能差异化选择较多 p{color:red;}

类选择器可以选一个或者多个标签可以根据需求选择非常多 .nav{color:red;}

id选择器一次只能选择一个标签 ID属性在每个HTML文档中只能出现一次一般和js搭配 #nav{color:red;}

通配符选择器选择所有标签选择太多，有的不需要特殊情况 *{color：red;}

基本选择器	作用	特点	使用情况	用法
标签选择器	可以选择所有相同标签	不能差异化选择	较多	p{color:red;}
类选择器	可以选一个或者多个标签	可以根据需求选择	非常多	.nav{color:red;}
id选择器	一次只能选择一个标签	ID属性在每个HTML文档中只能出现一次	一般和js搭配	#nav{color:red;}
通配符选择器	选择所有标签	选择太多，有的不需要	特殊情况	*{color：red;}

4. 复合选择器（记忆）

4.1 子代选择器

子代选择器通过指定某个元素的子元素（亲儿子）进行选择，使用符号 > 表示。

其语法格式为：
#parent > #child {
    color: red;
}
注：外层parent标签写在前面，内层child 标签写在后面，中间用大于号（' > '）分隔。

示例演示：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>
<style>
  nav > ul > li {
    display: inline-block;
    margin-right: 20px;
  }
  nav > ul > li > a {
    color: blue;
    text-decoration: none;
  }
</style>

分析：

在这个案例中，我们定义了一个导航菜单，其中包含一个无序列表。使用子集选择器，我们选择了直接子元素 li 并将其显示方式设置为 inline-block ，同时设置了 margin-right 来调整每个菜单项的间距。再使用子集选择器选择直接子元素 a ，并设置其字体颜色为蓝色，去掉下划线。

通过子集选择器，我们可以针对特定的子元素进行样式设置，使得页面的样式更为灵活。

4.2 后代选择器

后代选择器可以选择一个元素的所有后代元素，无论其位于多深的层级之下。

其语法格式：
#parent #child {
    color: red;
}
注：外层parent标签写在前面，内层child 标签写在后面，中间用空格分隔。

实例演示：

<div class="parent">
  <h2>《南乡一剪梅 · 招熊少府》</h2>
  <p>元⋅ 虞集</p>
  <ul>
    <li>寄语多情熊少府；</li>
    <li>晴也须来，雨也须来。</li>
  </ul>
</div>
<style>
  .parent ul li {
    color: red;
  }
</style>

分析：

在这个示例中，我们使用 .parent ul li 的样式来选择 .parent 元素下的所有 ul 子元素下的 li 后代元素，并将它们的颜色设置为红色。这样，就实现了将 .parent 元素下的所有列表项设置为红色的效果。

需要注意的是，后代选择器可以选择在任何深度的后代元素，因此如果选择器的范围过于广泛，则可能会影响到其他元素的样式。因此，在使用后代选择器时，需要根据具体的情况仔细考虑选择器的范围，避免样式冲突。

小拓展：

（1）临近兄弟选择器

格式：选择器使用加号“+”来链接前后两个选择器。

特点：选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

作用：二者有相同的父元素，选择紧接在另一个元素后的元素。（注意：该选择器是借用兄长元素来定位其的第一个弟弟元素，只对弟弟元素启渲染作用）

语句格式：
<-- XiongZhang：兄长元素，DiDiYiHao ：年龄最大的弟弟（即，一号弟弟）-->
#XiongZhang+#DiDiYiHao{
   			color: red;
}
（2）普通兄弟选择器

格式：使用 波浪号“~”来链接前后两个选择器。

特点：选择器中的两个元素有同一个父亲。

作用：二者有相同的父元素，并且互为兄弟元素。（注：只对最后一个兄弟元素启渲染作用）

语句格式：
<--  DaGe : 大哥， DiDi：最小的弟弟 注：此时的兄弟人数2人以上-->
#DaGe~#DiDi{
   			color: red;
}

4.3 交集选择器

格式：无符号分隔、直接相连来链接前后两个选择器。

特点：对同时满足两个或多个选择器的元素才启渲染作用。

作用：将两个或多个选择器组合起来使用，以便选择同时满足多个条件的元素。

语句格式：
.box1.box2 {
    background-color: purple;
  }

示例演示：

<div class="box1"></div>
<div class="box2"></div>
<div class="box1 box2"></div>
<div class="box3 box2"></div>
 <style>
  .box1 {
    width: 100px;
    height: 100px;
    background-color: red;
  }
   .box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
   .box1.box2 {
    background-color: purple;
  }
</style>

分析：

在这个例子中，我们定义了四个 div 元素，分别添加了 box1 和 box2 类名。然后使用交集选择器 .box1.box2 来选择同时具有 box1 和 box2 类名的元素，并将其背景颜色设置为 purple。于是，第三个 div 元素具有 box1 和 box2 类名，其背景颜色被设置为 purple。

4.4 并集选择器

格式：使用 逗号 “ ，”来链接前后两个选择器。

特点：对满足在两个或多个选择器中任意一个的元素都启渲染作用。

作用：可以将多个选择器组合起来，以便同时选择多个元素。

语句格式：
.box1, .box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
  }

示例演示：

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<style>
  .box1, .box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .box3, .box4 {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

分析：

在这个案例中，我们定义了四个 div 元素，并使用并集选择器 .box1, .box2 来同时选择具有 box1 和 box2 类名的元素，并将它们的背景颜色都设置为蓝色；使用并集选择器 .box3, .box4 来同时选择具有 box3 和 box4 类名的元素，并将它们的背景颜色都设置为红色。

通过并集选择器，我们可以同时对多个元素进行样式设置，使得页面表现更为统一和美观。