小菜鸟

java菜鸟号正在起航

0%

CSS语法

发表于 更新于 分类于 阅读次数： 26 Valine： 0
本文字数： 7.6k 阅读时长 ≈ 7 分钟

CSS 语法详解：选择符、属性与样式规则全指南

CSS（层叠样式表）的核心是通过 “选择符定位元素 + 属性 - 值控制样式” 实现网页美化与布局。理解 CSS 语法结构（选择符、属性、值）及各类选择符的使用场景，是精准控制元素样式、提升代码可维护性的基础。从 “基础语法结构→核心选择符分类→组合使用技巧→优先级规则” 四个维度，系统讲解 CSS 语法的使用方法与实战细节。

CSS 基础语法结构

CSS 样式规则由 选择符（Selector）、属性（Property） 和 值（Value） 三部分组成，基本格式如下：

1
2
3
4
选择符 {
  属性1: 值1;  /* 控制元素的某一样式（如颜色、尺寸） */
  属性2: 值2;  /* 多个属性用分号分隔，最后一个分号可省略 */
}

关键说明：

  1. 选择符：定位需要应用样式的 HTML 元素（如标签名、class、id）；
  2. 属性：CSS 预定义的样式维度（如 color 控制颜色，font-size 控制字体大小）；
  3. 值：属性的具体取值（需符合属性的语法规则，如 color: red 或 color: #ff0000）；
  4. 代码规范：
    • 花括号 {} 包裹属性 - 值对，建议独占一行；
    • 每个属性 - 值对以分号 ; 结尾，增强代码可读性；
    • 缩进（如 2 个或 4 个空格）可提升代码层级感，便于维护。

核心选择符分类与用法

选择符是 CSS 语法的 “定位工具”，不同选择符对应不同的元素匹配规则。以下按 “基础选择符→关系选择符→属性选择符” 的顺序，详解常用选择符的用法。

1. 基础选择符：直接定位元素

基础选择符是最常用的选择符，直接通过元素的标签名、class、id 等属性定位元素。

（1）标签选择符（元素选择符）

通过 HTML 标签名匹配元素，作用于页面中所有该类型的标签，适合 “统一设置某类元素的基础样式”。

语法：标签名 { 属性: 值; }
示例：统一设置所有 <p> 标签的字体颜色和大小

1
2
3
4
5
/* 匹配页面中所有 <p> 标签 */
p {
  color: #333;    /* 字体颜色为深灰色 */
  font-size: 16px;/* 字体大小为 16px */
}

特点：

  • 作用范围广，无法精准定位单个元素；
  • 优先级较低（低于 class 和 id 选择符）。
（2）类选择符（class 选择符）

通过元素的 class 属性匹配元素，以 . 开头，适合 “为多个不同类型的元素设置相同样式”（可复用）。

语法：.class名 { 属性: 值; }
示例：为 <p> 和 <li> 标签设置 “红色高亮” 样式

1
2
3
4
5
/* 定义 class 为 "highlight" 的样式 */
.highlight {
  color: red;          /* 字体红色 */
  background-color: #fff3cd; /* 背景浅黄 */
}
1
2
3
<!-- 不同标签复用同一 class 样式 -->
<p class="highlight">这段文字需要高亮</p>
<li class="highlight">这个列表项也需要高亮</li>

进阶：多 class 组合
一个元素可同时拥有多个 class（空格分隔），样式叠加生效；若需 “同时满足多个 class 才生效”，选择符需连写（无空格）：

1
2
3
4
/* 仅匹配同时拥有 "highlight" 和 "large" 两个 class 的元素 */
.highlight.large {
  font-size: 20px; /* 额外放大字体 */
}
1
2
<!-- 同时拥有两个 class，会应用 .highlight 和 .highlight.large 的样式 -->
<div class="highlight large">高亮且放大的文本</div>
（3）ID 选择符

通过元素的 id 属性匹配元素，以 # 开头，适合 “精准定位单个唯一元素”（HTML 规定 id 在页面中必须唯一）。

语法：#id名 { 属性: 值; }
示例：为页面中唯一的 “顶部导航” 设置样式

1
2
3
4
5
6
/* 匹配 id 为 "top-nav" 的元素 */
#top-nav {
  background-color: #333;
  color: white;
  padding: 10px 0;
}
1
2
<!-- 唯一的顶部导航元素 -->
<nav id="top-nav">首页 | 产品 | 关于我们</nav>

注意：

  • id 不可重复，若页面中存在多个相同 id，样式仅对第一个元素生效；
  • 优先级最高（高于 class 和标签选择符），不建议频繁使用（不利于样式复用）。
（4）通配符选择符

以 * 表示，匹配页面中所有元素，适合 “统一初始化页面样式”（如清除默认边距）。

语法：* { 属性: 值; }
示例：清除所有元素的默认边距和内边距

1
2
3
4
5
6
/* 匹配所有元素，初始化边距 */
* {
  margin: 0;  /* 清除默认外边距 */
  padding: 0; /* 清除默认内边距 */
  box-sizing: border-box; /* 统一盒模型计算方式 */
}

特点：

  • 作用范围极广，可能影响性能（不建议频繁用于复杂页面）；
  • 优先级最低，任何其他选择符的样式都会覆盖它。

2. 关系选择符：定位元素间的关联关系

关系选择符通过 “元素在 HTML 中的层级或位置关系” 定位元素，适合 “精准控制嵌套、兄弟元素的样式”， “嵌套标签”“兄弟节点” 均属于此类。

（1）后代选择符（空格分隔）

匹配 “祖先元素下所有符合条件的后代元素”（包括子元素、孙元素等），语法为 祖先选择符 后代选择符。

示例：设置 <ol> 下所有 <ul> 的列表样式（无论嵌套层级）

1
2
3
4
/* 匹配 <ol> 下所有 <ul> 元素（子级、孙级均可） */
ol ul {
  list-style-type: circle; /* 空心圆标记 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ol>
  <li>第一层列表
    <ul>
      <li>第二层列表（会被匹配）</li>
    </ul>
  </li>
  <li>第一层列表
    <div>
      <ul>
        <li>第三层列表（也会被匹配）</li>
      </ul>
    </div>
  </li>
</ol>
（2）子选择符（> 分隔）

匹配 “父元素下直接的子元素”（仅一级，不包括孙元素），语法为 父选择符 > 子选择符，解决 “必须是父子关系” 的需求。

示例：仅设置 <div> 直接子级的 <p> 样式（孙级不生效）

1
2
3
4
/* 仅匹配 <div> 直接子级的 <p> 元素 */
div > p {
  color: blue;
}
1
2
3
4
5
6
<div>
  <p>直接子级 <p>（会被匹配）</p>
  <div>
    <p>孙级 <p>（不会被匹配）</p>
  </div>
</div>
（3）相邻兄弟选择符（+ 分隔）

匹配 “紧接在某元素后的第一个兄弟元素”（需同属一个父元素，且紧邻），语法为 前序选择符 + 相邻选择符。

示例：设置 “紧跟在 .active 后的 .item 元素” 的样式

1
2
3
4
/* 匹配紧接在 .active 后的第一个 .item 元素 */
.active + .item {
  border-top: 1px solid #ccc; /* 添加上边框 */
}
1
2
3
4
5
6
<ul>
  <li class="item">列表项1</li>
  <li class="active">当前项</li>
  <li class="item">列表项2（会被匹配，紧邻 .active）</li>
  <li class="item">列表项3（不会被匹配，不紧邻）</li>
</ul>
（4）通用兄弟选择符（~ 分隔）

匹配 “某元素后所有符合条件的兄弟元素”（需同属一个父元素，无需紧邻），语法为 前序选择符 ~ 兄弟选择符。

示例：设置 “.active 后所有 .item 元素” 的样式

1
2
3
4
/* 匹配 .active 后所有 .item 兄弟元素 */
.active ~ .item {
  opacity: 0.7; /* 降低透明度 */
}
1
2
3
4
5
6
7
<ul>
  <li class="item">列表项1</li>
  <li class="active">当前项</li>
  <li class="item">列表项2（会被匹配）</li>
  <li class="other">其他项</li>
  <li class="item">列表项3（会被匹配，无需紧邻）</li>
</ul>

3. 标签指定选择符：缩小匹配范围

标签指定选择符通过 “标签名 + class/id” 组合，缩小选择范围，确保样式仅作用于 “特定标签的特定 class/id 元素”，“h1#content”“h1.p1” 均属于此类。

语法：

  • 标签 + id：标签名#id名（无空格）；
  • 标签 + class：标签名.class名（无空格）。

示例：

1
2
3
4
5
6
7
8
9
10
/* 仅匹配 <h1> 标签中 id 为 "content" 的元素 */
h1#content {
  font-size: 24px;
  text-align: center;
}

/* 仅匹配 <h1> 标签中 class 为 "p1" 的元素 */
h1.p1 {
  color: #ff6700;
}
1
2
3
4
5
6
7
8
<!-- 会应用 h1#content 样式 -->
<h1 id="content">页面标题</h1>

<!-- 会应用 h1.p1 样式 -->
<h1 class="p1">副标题</h1>

<!-- 不会应用 h1.p1 样式（标签是 <p>，不是 <h1>） -->
<p class="p1">普通文本</p>

4. 组合选择符：多条件叠加定位

组合选择符是 “基础选择符 + 关系选择符” 的叠加使用，适合 “更精准的元素定位”， “h1 .p1”“#content h1” 均属于此类。

常见组合场景：

  1. 祖先 class + 后代标签：匹配某 class 下所有指定标签；
  2. 祖先 id + 后代 class：匹配某 id 下所有指定 class 元素；
  3. 标签 + class + 后代标签：多条件叠加缩小范围。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 1. <h1> 下所有 class 为 "p1" 的元素 */
h1 .p1 {
  font-weight: normal; /* 取消加粗 */
}

/* 2. id 为 "content" 的元素下所有 <h1> 标签 */
#content h1 {
  border-bottom: 2px solid #333; /* 底部边框 */
}

/* 3. id 为 "content" 的 <h1> 下所有 <h2> 标签 */
h1#content h2 {
  font-size: 20px;
  color: #666;
}
1
2
3
4
5
6
7
<div id="content">
  <h1>页面标题
    <span class="p1">副标题（会应用 h1 .p1 样式）</span>
    <h2>子标题（会应用 h1#content h2 样式）</h2>
  </h1>
  <h1>其他标题（会应用 #content h1 样式）</h1>
</div>

CSS 选择符优先级规则

当多个选择符同时作用于同一个元素时，优先级决定 “哪个样式最终生效”，这是避免样式冲突的核心知识。

优先级计算规则（从高到低）

  1. !important：强制提升样式优先级（最高），需写在属性值后（如color: red !important;）；
    • 注意：滥用 !important 会导致样式难以维护，仅在 “覆盖第三方样式” 时使用。
  2. 内联样式：元素的 style 属性（如 <div style="color: blue;">）；
  3. ID 选择符：#id（每个 ID 计 100 分）；
  4. class / 伪类 / 属性选择符：.class、:hover、[type="text"]（每个计 10 分）；
  5. 标签 / 伪元素选择符：div、::before（每个计 1 分）；
  6. 通配符选择符：*（计 0 分）。

优先级叠加示例

选择符 优先级得分（ID:100 + class:10 + 标签：1） 最终得分
p 1（仅标签） 1
.highlight 10（仅 class） 10
p.highlight 1 + 10 = 11 11
div > p.highlight 1（div） + 1（p） + 10（highlight） = 12 12
#content p.highlight 100（#content） + 1（p） + 10（highlight）= 111 111

结论：得分越高，优先级越高；得分相同则 “后定义的样式覆盖先定义的样式”。

实战：选择符组合使用案例

以下通过 “导航菜单样式” 案例，综合运用各类选择符，理解实际开发中的用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- HTML 结构 -->
<nav id="main-nav">
  <ul>
    <li class="nav-item active">
      <a href="#">首页</a>
    </li>
    <li class="nav-item">
      <a href="#">产品</a>
      <ul class="sub-nav">
        <li><a href="#">手机</a></li>
        <li><a href="#">电脑</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#">关于我们</a>
    </li>
  </ul>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 1. 基础导航样式（id 选择符 + 后代选择符） */
#main-nav ul {
  list-style: none; /* 清除列表默认样式 */
  display: flex;    /* 横向排列 */
  gap: 20px;        /* 列表项间距 */
  padding: 0;
  margin: 0;
}

/* 2. 当前项样式（class 选择符 + 后代选择符） */
.nav-item.active a {
  color: #ff6700;    /* 红色文字 */
  font-weight: bold; /* 加粗 */
}

/* 3. 子导航样式（子选择符 + class 选择符） */
.nav-item > .sub-nav {
  display: none;    /* 默认隐藏 */
  position: absolute;
  background-color: white;
  border: 1px solid #eee;
  padding: 10px;
  flex-direction: column; /* 纵向排列 */
  gap: 5px;
}

/* 4.  hover 显示子导航（伪类 + 相邻兄弟选择符） */
.nav-item:hover > .sub-nav {
  display: flex; /* hover 时显示 */
}

/* 5. 子导航链接样式（后代选择符 + 标签选择符） */
.sub-nav li a {
  color: #666;
  text-decoration: none; /* 清除下划线 */
}

常见问题与解决方案

1. 选择符匹配不到元素

  • 原因 1：选择符语法错误（如后代选择符漏写空格、子选择符用错符号）；
    • 解决方案：检查语法（如 div.p1 无空格，div .p1 有空格）。
  • 原因 2：HTML 结构与选择符不匹配（如子选择符匹配孙元素）；
    • 解决方案：通过浏览器 “检查元素”（F12）确认元素层级，调整选择符（如将 > 改为空格）。
  • 原因 3：样式被高优先级选择符覆盖；
    • 解决方案：通过浏览器 “元素样式” 面板查看优先级，提升当前选择符优先级（如添加 class 或 id）。

2. 多选择符样式冲突

  • 解决方案 1：提升目标选择符优先级（如添加 id 或增加特定标签）；
  • 解决方案 2：避免不必要的大范围选择符（如少用通配符 * 或标签选择符）；
  • 解决方案 3：使用 !important 强制覆盖（谨慎使用，仅作为最后手段）。

3. 后代选择符与子选择符混淆

  • 记忆技巧：
    • 空格（后代）：“所有后代，无论层级”（如 “家族中所有晚辈”）；
    • >（子级）：“仅直接子级，一层关系”（如 “仅亲生子女”）。

总结

CSS 语法的核心是 “选择符精准定位 + 属性 - 值控制样式”，掌握以下要点即可灵活运用：

  1. 基础选择符：标签（统一）、class（复用）、id（唯一）、通配符（全局）；
  2. 关系选择符：后代（空格）、子级（>）、相邻兄弟（+）、通用兄弟（~）；
  3. 组合选择符：多条件叠加（如 #id .class），缩小匹配范围；
  4. 优先级规则：ID > class > 标签，得分叠加，后定义覆盖先定义
相关文章

欢迎关注我的其它发布渠道

表情 | 预览
快来做第一个评论的人吧~
Powered By Valine
v1.3.10