CSS入门指南：从零开始学习网页开发——（二）选择器

一、基础选择器

1、通配选择器

• 作用：可以选中所有的 HTML 元素，可以用于清除网页样式。

• 代码：

    * {
      color: red;
      font-size: 10px;
    }

2、元素选择器

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

• 代码：

/* 选择所有<p>元素 */
p {
  color: blue;
}

3、类选择器

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

• 代码：

/* 选择所有class="highlight"的元素 */
.highlight {
  background-color: yellow;
}

4、ID选择器

• 作用：根据元素的 id 属性值，来精准的选中某个元素。
• 代码：

/* 选择id="main"的元素 */
#main {
  width: 960px;
  margin: 0 auto;
}

注意：ID选择器具有唯一性，一个页面中不应有重复的ID，ID值最好以字母开头、不要包含空格、区分大小写。

二、复合选择器

1、交集选择器（即...又...）

• 作用：选中同时符合多个条件的元素。
• 语法：选择器1选择器2...选择器n {}，注意选择器之间没有空格。
• 注意：（1）有标签名，标签名必须写在前面；（2）id 选择器、通配选择器一般不作为交集的条件；（3）交集选择器中不可能出现两个元素选择器，一个元素不可能即是 p 元素又是span元素；（4）元素选择器配合类名选择器使用最为广泛。
• 代码：

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}

• 常用场景及示例

         精确匹配特定类别的元素：div.active {  }  /* 只作用于 <div> 中带有 .active 类的元素 */

        多类名组合控制：.btn.primary{ }     /* 仅作用于同时有 .btn 和 .primary 类的元素 */

        增加选择器权重

        .item { color: black; }  /* 权重 0-1-0 */
         li.item.active {         /* 权重 0-3-0 */
           color: red; /* 优先级更高 */
         }

2、并集选择器（要么...要么...）

• 作用：选中多个选择器对应的元素，又称：分组选择器。
• 语法：选择器1, 选择器2, 选择器3, ... 选择器n {}，多个选择器通过 , 连接，此处 , 的含义就是：或。
• 注意：（1）并集选择器一般竖着写；（2）任何形式的选择器都可以作为并集选择器的一部分；（3）并集选择器，通常用于集体声明，可以缩小样式表体积。
• 代码：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}

/* 统一设置标题样式 */
h1,
h2,
h3 {
  font-family: "Helvetica Neue", sans-serif;
  color: #333;
}

/* 表单元素统一设置 */
input, 
textarea,
select {
  border: 1px solid #ddd;
  padding: 8px;
}

• 常用场景及示例

         共享基础样式：为多个组件（如卡片、警告框、面板）应用相同的边框、阴影、内边距等

.card, .alert, .panel 
{
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

       共享状态样式：为不同类型的元素（按钮、导航链接、标签页）定义相同的悬停状态

.btn:hover, .nav-link:hover, .tab-item:hover 
{
    background-color: #3498db;
    color: white;
}

        重置默认样式：同时重置多个元素的默认样式

h1, h2, h3, h4, h5, h6 
{
    margin: 0 0 15px 0;
    font-weight: 600;
}

 3、后代选择器

• 作用：选中指定元素中，符合要求的后代元素。
• 语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代），选择器之间，用空格隔开。
• 注意：（1）后代选择器，最终选择的是后代，不选中祖先；（2）结构一定要符合HTML嵌套要求，例如不能p中写h1 ~ h6。
• 代码：

/* 选中ul中的所有li */
ul li {
color: red;
}
/* 选中ul中所有li中的a */
ul li a {
color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}

 4、子元素选择器

• 作用：选中指定元素中，符合要求的子元素（儿子元素）（先写父，再写子）
• 语法：选择器1 > 选择器2
• 注意：子代选择器，最终选择的是子代，不是父级。子仅代表儿子。
• 代码：

/* div中的子代a元素 */
div>a {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
color: red;
}
/* 选择ul的直接子元素li */
ul > li {
  list-style-type: square;
  margin-left: 20px;
}

5、相邻兄弟选择器 

• 作用：选中指定元素后，符合条件的相邻兄弟元素。
• 语法：选择器1+选择器2 {}
• 注意：（1）仅选择紧邻的下一个兄弟元素；（2）常用于表单验证提示等场景。
• 代码：

/* h1后紧跟的p元素 */
h1 + p {
  font-size: 1.2em;
  color: #666;
}

/* input后紧跟的span提示 */
input + span {
  color: #c00;
  font-size: 0.8em;
}

 6、通用兄弟选择器

• 作用：选中指定元素后，符合条件的所有兄弟元素。
• 语法：选择器1~选择器2 {} 。
• 注意：选择的是下面的兄弟。
• 代码：

/* h2后的所有p元素 */
h2 ~ p {
  margin-top: 0.5em;
}

/* 选中.active后的所有li */
.active ~ li {
  opacity: 0.6;
}

 7、属性选择器

• 作用：选中属性值符合一定要求的元素。
• 语法：1 [属性名] 选中具有某个属性的元素 ；2 [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素，^="值  以指定的值开头的元素，$="值"  以指定的值结尾的元素，*=“值” 属性值包含指定值的元素
• 代码：

/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}

 8、伪类选择器

• 作用：选中特殊状态的元素。
• 语法：

                一、动态伪类

                        1. :link 超链接未被访问的状态

                        2. :visited 超链接访问过的状态。

                二、结构伪类

/* 为所有不是 <p> 元素的元素设置文本颜色 */
:not(p) {
  color: red;
}

/* 
  选择所有ul元素下的li子元素，但排除其中的第3个li元素
*/
ul > li:not(:nth-of-type(3)) {
}

 9、伪元素选择器

• 作用：选中元素中的一些特殊位置。
• 常用伪元素：

三、选择器的优先级