两万块前端就业课程——学习笔记分享（Day

语法	含义	示例
`[attr^=value]`	属性值以 value 开头	`[title^="d"]` 匹配 title="div"、"doc"
`[attr$=value]`	属性值以 value 结尾	`[title$="v"]` 匹配 title="div"、"lov"
`[attr*=value]`	属性值包含 value（任意位置）	`[title*="i"]` 匹配 title="div"、"list"
`[attr~=value]`	属性值包含 value 且以空格分隔	`[title~="div"]` 匹配 title="a div b"
`[attr	=value]`	属性值等于 value 或以 value - 开头	`[lang	=en]`匹配 lang="en"、"en-US"

开发建议：

日常开发中优先使用 class 或 id 选择器，更直观且性能更优。
属性选择器多用于特殊场景（如选择原生属性，如 [disabled]、[href] 等）。

二、全局属性与属性选择器结合

1. `title` 属性介绍

功能：HTML 全局属性，可添加到任何元素，鼠标悬停时显示提示文本。

示例：

<div title="这是一个div">鼠标悬停查看提示</div>
<p title="段落说明">这是一段文字</p>

2. 属性选择器的使用场景

适用场景：当需要选择具有特定属性的元素，且无需手动添加 class 时。
优势：直接利用元素已有的属性（如原生属性 title、href、disabled），减少冗余代码。

示例：

/* 选中所有带title属性的元素 */
[title] { 
  border: 1px solid #ccc; 
}

/* 选中title值为"提示"的元素 */
[title="提示"] { 
  color: green; 
}

三、属性选择器的注意事项

语法细节：
- 必须用中括号 [] 包裹属性名，否则会被解析为元素选择器（如 title 会被当作标签选择器，而非属性）。
- 精确匹配时，= 前后不能有空格（如 [title = "div"] 是错误写法）。
优先级：
- 属性选择器优先级与 class 选择器相同（均为 0,0,1,0），低于 id 选择器。
性能考量：
- 复杂属性选择器（如 *=、^=）性能略低于 class 选择器，大规模使用可能影响页面渲染速度。

四、示例演示

<!-- HTML -->
<div title="div">第一个div（title="div"）</div>
<div title="div box">第二个div（title="div box"）</div>
<div title="doc">第三个div（title="doc"）</div>
<p title="paragraph">这是一个段落（title="paragraph"）</p>

/* CSS */
/* 1. 所有带title属性的元素 */
[title] { 
  margin: 10px; 
  padding: 5px; 
}

/* 2. title值精确为"div"的元素 */
[title="div"] { 
  background: yellow; 
}

/* 3. title以"doc"开头的元素 */
[title^="doc"] { 
  color: blue; 
}

/* 4. title包含"box"的元素 */
[title*="box"] { 
  border: 2px dashed red; 
}

效果：

所有元素都有外边距和内边距（因 [title] 选择器）。
第一个 div 背景为黄色（因 [title="div"]）。
第三个 div 文字为蓝色（因 [title^="doc"]）。
第二个 div 有红色虚线边框（因 [title*="box"]）。

五、知识小结

知识点	核心内容	易错点
基础属性选择器	`[attribute]` 匹配所有带该属性的元素	忘记写中括号 `[]`
精确匹配	`[attribute=value]` 严格匹配属性值	`=` 前后加空格导致失效
高级匹配语法	`^=`（开头）、`$=`（结尾）、`*=`（包含）等	混淆 `~=`（空格分隔）和 `*=`（任意包含）
开发最佳实践	优先使用 `class`，属性选择器用于特殊场景	过度使用复杂属性选择器影响性能

通过理解属性选择器的语法和适用场景，可以在特殊需求下更灵活地选择元素，同时避免滥用导致代码冗余或性能问题。

2. 后代选择器（必须掌握的非常重要）

一、后代选择器

后代选择器用于根据元素的嵌套层级关系选择元素，主要分为两种类型：

1. 所有后代选择器（空格分隔）

定义：通过空格分隔两个选择器，表示选中 “第一个选择器匹配元素的所有后代元素”（包括直接子元素和间接嵌套的后代元素）。

语法：

祖先选择器 后代选择器 { /* 样式 */ }

示例解析：结合以下 HTML 结构：

<div class="home">
  <div class="box">
    <span>呵呵</span> <!-- 间接后代（home → box → span） -->
    <div class="content">
      <div class="desc">
        <p><span>哈哈</span></p> <!-- 深层后代（home → ... → span） -->
      </div>
    </div>
  </div>
  <span>啦啦啦</span> <!-- 直接后代（home → span） -->
</div>
<span>外部span</span> <!-- 非home后代 -->

若使用选择器：

.home span { color: red; }

匹配范围：.home 内部所有 span（包括直接子元素 <span>啦啦啦</span>、间接子元素 <span>呵呵</span>、深层嵌套的 <span>哈哈</span>）。
排除范围：.home 外部的 <span>外部span</span> 不匹配。

2. 直接子代选择器（`>` 分隔）

定义：通过大于号 > 分隔两个选择器，表示仅选中 “第一个选择器匹配元素的直接子元素”（仅一级嵌套，不包含间接后代）。

语法：

父选择器 > 子选择器 { /* 样式 */ }

示例解析：使用选择器：

.home > span { background: green; }

匹配范围：仅 .home 的直接子元素 <span>啦啦啦</span>（一级嵌套）。
排除范围：.home 内部的间接后代（如 <span>呵呵</span>、<span>哈哈</span>）不匹配。

二、核心区别对比

选择器类型	语法符号	匹配范围	典型应用场景
所有后代选择器	空格	所有层级的后代（直接 + 间接）	批量设置某容器内所有同类元素样式
直接子代选择器	`>`	仅直接子元素（一级嵌套）	精准控制父元素的直接子元素样式

三、应用场景与优势

避免冗余 class：无需为每个嵌套元素添加 class，直接通过层级关系选择，例如：

.article p { line-height: 1.6; } /* 匹配.article内所有p标签 */
.nav > li { margin-left: 10px; } /* 仅匹配.nav的直接子元素li */

精准控制样式范围：避免样式污染外部元素，例如：
- 用 .header a 仅设置页头内的链接样式，不影响页面其他链接。
- 用 .list > .item 仅设置列表的直接子项样式，不影响子项内部的嵌套元素。

四、注意事项

性能影响：所有后代选择器（空格）会递归查找所有层级，深层嵌套时可能增加浏览器解析开销，建议避免过度嵌套（如 a b c d e 这类多层级选择器）。
语法细节：
- 空格和 > 前后可以有空格（如 .home > span 与 .home>span 效果相同），但推荐保留空格提高可读性。
- 嵌套层级以 DOM 结构为准，与 HTML 缩进无关（即使代码缩进混乱，只要 DOM 层级正确，选择器仍生效）。

五、示例总结

通过以下代码可直观对比两种选择器的效果：

<style>
  .home span { color: red; } /* 所有后代span文字变红 */
  .home > span { background: green; } /* 直接子代span背景变绿 */
</style>

<div class="home">
  <div class="box">
    <span>呵呵</span> <!-- 文字红，无绿背景（间接后代） -->
    <div class="content">
      <div class="desc">
        <p><span>哈哈</span></p> <!-- 文字红，无绿背景（深层后代） -->
      </div>
    </div>
  </div>
  <span>啦啦啦</span> <!-- 文字红，绿背景（直接子代） -->
</div>
<span>外部span</span> <!-- 无样式（非后代） -->

效果：

所有 .home 内部的 span 文字均为红色。
仅 .home 的直接子元素 span 同时拥有绿色背景。

3. 兄弟选择器

二、兄弟选择器

兄弟选择器用于选择共享同一父元素的同级元素（即 “兄弟节点”），根据匹配范围可分为两种类型。

1. 相邻兄弟选择器（`+` 连接）

定义：通过加号 + 连接两个选择器，表示选中 “第一个选择器匹配元素的紧邻后一个兄弟元素”（仅一个，且必须紧随其后）。

语法：

前兄弟选择器 + 目标选择器 { /* 样式 */ }

示例解析：给定 HTML 结构：

<div class="home">
  <div class="box">盒子1</div>
  <div class="content">内容1</div> <!-- 紧邻.box的兄弟 -->
  <div class="content">内容2</div>
</div>

使用选择器：

.box + .content { color: red; }

匹配结果：仅选中 .box 后面紧邻的第一个 .content（即 “内容 1”），文字变为红色。
条件限制：
- 两个元素必须是同一父元素的子节点（此处父元素为 .home）。
- 目标元素必须紧跟在前兄弟元素之后（中间不能有其他元素）。

2. 普遍兄弟选择器（`~` 连接）

定义：通过波浪号 ~ 连接两个选择器，表示选中 “第一个选择器匹配元素的所有后续兄弟元素”（不限数量，无需紧邻）。

语法：

前兄弟选择器 ~ 目标选择器 { /* 样式 */ }

示例解析：基于上述 HTML 结构，使用选择器：

.box ~ .content { background: yellow; }

匹配结果：选中 .box 后面所有 .content 兄弟元素（包括 “内容 1” 和 “内容 2”），背景变为黄色。
条件限：
- 两个元素必须是同一父元素的子节点。
- 目标元素必须在前兄弟元素之后（但中间可以有其他元素）。

三、核心区别对比

选择器类型	语法符号	匹配范围	典型应用场景
相邻兄弟选择器	`+`	仅紧邻的后一个兄弟元素	选中紧随某元素后的特定元素（如表单提示语）
普遍兄弟选择器	`~`	所有后续兄弟元素（不限紧邻）	批量设置某元素后的所有同类兄弟样式

四、应用场景示例

表单提示样式（相邻兄弟）：为输入框后的紧邻提示文字设置样式：

<style>
  input + .tip { color: #666; font-size: 12px; }
  input:focus + .tip { color: #165DFF; } /* 输入框聚焦时提示文字变色 */
</style>

<div class="form-item">
  <input type="text" placeholder="用户名">
  <span class="tip">请输入3-16位字符</span> <!-- 紧邻input的兄弟 -->
  <span class="extra">其他说明</span> <!-- 不匹配（非紧邻） -->
</div>

列表选中状态联动（普遍兄弟）：选中某列表项后，所有后续项变灰：

<style>
  .list .item.active ~ .item { opacity: 0.5; }
</style>

<ul class="list">
  <li class="item">项1</li>
  <li class="item active">项2（选中）</li>
  <li class="item">项3（变灰）</li>
  <li class="item">项4（变灰）</li>
</ul>

五、注意事项

方向限制：兄弟选择器仅匹配 “后续” 兄弟，不匹配 “前面” 的兄弟。例如 .content + .box 无法选中 .content 前面的 .box。

父元素一致性：必须确保两个元素属于同一父元素，否则无法匹配。例如：

<div class="home">
  <div class="box">盒子</div>
</div>
<div class="home">
  <div class="content">内容</div> <!-- 与.box不同父元素，不匹配.box + .content -->
</div>

使用频率：兄弟选择器在日常开发中使用频率低于后代选择器，主要用于特殊联动场景（如表单、列表状态关联），只需掌握基础语法即可。

总结

兄弟选择器通过元素的同级关系筛选目标，核心区别在于匹配范围：

+ 选中 “紧邻的后一个兄弟”，适用于精准关联两个相邻元素。
~ 选中 “所有后续兄弟”，适用于批量设置后续元素样式。通过实际场景练习（如表单、导航栏）可快速掌握其用法，无需死记硬背。

4. 选择器-选择器组-交集-并集（重要：项目中经常会使用的）

1. 交集选择器的进阶理解

多重条件组合：除了元素与类的组合，交集选择器还可实现更复杂的匹配，例如：
- p.text.active：选中同时拥有text和active两个类的<p>元素
- div#header.main：选中 id 为header且类为main的<div>元素（但不推荐过度叠加，影响可读性）
错误写法警示：
- div .box（中间有空格）：这是后代选择器，而非交集选择器
- .box div：含义为 "类为 box 的元素内部的 div"，与交集逻辑完全不同

2. 并集选择器的实用技巧

换行书写规范：当选择器较多时，建议换行排版以增强可读性：
```
h1,
h2,
h3,
.title {
  font-weight: normal;
  color: #333;
}
```
避免无意义合并：不要为了精简代码强行合并关联性低的选择器，例如将 "按钮样式" 与 "标题样式" 合并可能导致后期维护混乱

优先级特性：并集选择器中每个选择器的优先级独立计算，例如：

p,       /* 优先级：元素选择器（1） */
.box,    /* 优先级：类选择器（10） */
#logo {  /* 优先级：ID选择器（100） */
  margin: 0;
}

上述代码中，

#logo

的样式仍会覆盖其他选择器对同一元素的样式设置

3. 选择器组的性能考量

交集选择器越具体，匹配效率越高（浏览器会先匹配左侧元素再筛选条件）
并集选择器的性能消耗与选择器数量正相关，建议控制在 10 个以内

避免同时使用交集与并集的复杂组合，例如：

/* 不推荐：过度复杂的选择器组 */
div.box, p.text, span#link.active { ... }

通过合理运用选择器组，可以在保证样式精准性的同时大幅提升 CSS 代码的效率，但需注意平衡简洁性与可读性，避免陷入 "为精简而精简" 的误区。

5. 伪类选择器

伪类（Pseudo-classes）：控制元素状态的动态选择器

一、伪类的核心概念与本质

伪类是 CSS 选择器的特殊类型，用于选择处于特定状态的元素（如鼠标悬停、被点击、获取焦点等）。其核心特点是：

“伪”：并非真实存在的类（不通过class属性定义），而是基于元素的动态状态或位置自动匹配。
语法：以冒号（:）为前缀，如 :hover、:active。
作用：为元素的不同状态添加差异化样式，增强交互反馈（如按钮悬停变色、输入框聚焦高亮）。

二、常用伪类分类与实战应用

按功能可分为动态伪类（最常用）、目标伪类、结构伪类等，其中动态伪类是前端开发的核心。

1. 动态伪类（响应用户交互）

伪类	作用场景	示例代码	核心功能
`:hover`	鼠标悬停在元素上时	`button:hover { background: blue; }`	按钮悬停时变色，提供交互反馈
`:active`	元素被点击且未释放时（点击中）	`a:active { color: red; }`	链接点击瞬间变色，增强操作感知
`:focus`	元素获取焦点时（如输入框）	`input:focus { border: 2px solid green; }`	输入框聚焦时高亮边框，提示当前交互对象
`:link`	未被访问过的链接（仅适用于`<a>`）	`a:link { color: #333; }`	区分未访问链接与其他文本
`:visited`	已被访问过的链接（仅适用于`<a>`）	`a:visited { color: #999; }`	提示用户该链接已访问

注意：

:link 和 :visited 仅对带href的<a>标签生效；
动态伪类的书写顺序会影响效果（推荐：link → visited → hover → active）。

2. 其他伪类（了解即可）

目标伪类 :target：匹配 URL 中锚点对应的元素（如#section1），用于跳转后高亮目标区域：

/* URL为https://example.com#intro时生效 */
#intro:target { background: #f0f0f0; }

元素状态伪类：用于表单控件，如：
- :enabled/:disabled：匹配启用 / 禁用的输入框；
- :checked：匹配选中的单选按钮 / 复选框。

否定伪类 :not()：排除特定元素，简化选择器：

/* 选中所有class不是"disabled"的按钮 */
button:not(.disabled) { cursor: pointer; }

三、伪类的使用技巧与注意事项

组合使用：伪类可与类选择器、元素选择器组合，精准定位元素：
```
/* 仅当类为"btn"的按钮悬停时生效 */
.btn:hover { transform: scale(1.05); }
```
优先级：伪类的优先级与类选择器相同（高于元素选择器，低于 ID 选择器）：
- div:hover 优先级 > div（元素选择器）；
- #box:hover 优先级 > .box:hover（ID 选择器 > 类选择器）。
兼容性：
- 常用伪类（:hover、:focus）兼容所有现代浏览器；
- 特殊伪类（如:nth-child()）需注意低版本浏览器支持（可通过 Can I Use 查询）。

四、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
伪类基本概念	选择特定状态的元素，语法以`:`开头	与类选择器的区别（`:` vs `.`）	⭐⭐
动态伪类`hover`	鼠标悬停时的样式，前端开发必掌握	可与任意元素组合（不限于链接）	⭐⭐⭐
动态伪类组合	`link`/`visited`/`hover`/`active`的顺序	顺序错误可能导致样式失效（如`hover`需在`link`之后）	⭐⭐
其他伪类	`:focus`/`:target`/`:not()`的基本作用	了解存在即可，无需深入记忆	⭐

开发建议

优先掌握hover：这是最常用的伪类，几乎所有交互元素（按钮、导航、卡片）都需要，务必熟练运用。
增强交互反馈：为可点击元素（<a>、button）添加hover和active样式，让用户清晰感知操作状态。
表单必用focus：输入框、下拉框等添加focus样式，提升表单易用性（如高亮边框、提示文字）。

伪类是实现 “动态样式” 的核心工具，合理使用能让页面从 “静态” 变为 “可交互”，显著提升用户体验。

6. 伪类-动态伪类

CSS 动态伪类：状态管理与 LVHA 顺序原则深度解析

一、a 元素的四种核心交互状态（动态伪类）

动态伪类是 CSS 中用于响应用户交互的关键工具，其中<a>标签的四种状态最为典型，分别对应不同的交互阶段：

伪类	状态描述	默认样式（浏览器）	核心作用
`a:link`	未被访问过的链接（初始状态）	蓝色，下划线	区分未访问链接与其他文本
`a:visited`	已被访问过的链接（基于浏览器历史）	紫色，下划线	提示用户该链接已浏览
`a:hover`	鼠标悬停在链接上时	通常变为红色或加深颜色	提供即时交互反馈，引导用户点击
`a:active`	链接被点击且未释放时（点击瞬间）	通常为深红色	强化点击动作的感知，提升操作确认感

示例代码：

/* 未访问链接 */
a:link { color: #3498db; text-decoration: none; }
/* 已访问链接 */
a:visited { color: #9b59b6; }
/* 鼠标悬停 */
a:hover { color: #e74c3c; text-decoration: underline; }
/* 点击瞬间 */
a:active { color: #c0392b; }

二、LVHA 顺序原则：避免样式覆盖的核心规则

四种伪类的书写顺序直接影响样式生效与否，必须严格遵循 link → visited → hover → active（记忆口诀：LoVe HAte，即 Love 的前两个字母 + Hate 的后两个字母）。

1. 顺序错误的后果：

若将hover写在link或visited之前，会导致悬停样式被默认状态覆盖（因为link和visited的优先级与hover相同，后定义的样式会覆盖先定义的）。

错误示例：

/* 错误顺序：hover在link之前，导致hover样式失效 */
a:hover { color: red; }
a:link { color: blue; } /* 覆盖hover样式 */

正确逻辑：

先定义默认状态（link、visited），再定义交互状态（hover、active），确保动态状态能覆盖默认状态。

三、焦点状态（`:focus`）的特殊性与位置

:focus用于选中获得焦点的元素（如通过 Tab 键导航或点击输入框），常见于可交互元素（<a>、<input>、<button>等）。

1. 特性：

非交互元素（如<div>、<p>）默认无法获得焦点；
浏览器会自动为聚焦元素添加 “焦点环”（outline），标识当前可操作对象；
常用于表单交互（如输入框聚焦时高亮边框）。

2. 书写位置：

建议放在hover之后、active之前，即 link → visited → hover → focus → active，原因是：

focus与hover同优先级，需确保悬停后聚焦的样式能生效；
active（点击状态）应在最后，覆盖聚焦状态。

示例：

a:focus { outline: 2px solid #2ecc71; } /* 焦点样式 */

四、默认样式继承与差异化设置

若仅设置a { color: blue; }，所有状态（包括hover、active）都会继承该颜色，无法实现差异化；
必须单独声明各伪类样式，才能让不同状态显示不同效果；
未显式定义的状态会继承最近的父状态样式（如未定义active，则继承hover的样式）。

五、实战建议

必写顺序：严格遵循 LVHA 原则，即使暂时不需要某状态（如visited），也建议按顺序占位，避免后续维护时出错。
移除默认下划线：通过text-decoration: none统一移除a标签的默认下划线，仅在hover时添加（提升美观度）。
焦点样式优化：保留或自定义:focus样式（如替换默认outline为更美观的边框），兼顾键盘导航用户的体验。
测试验证：通过 Tab 键测试焦点切换，通过刷新页面（清除缓存）测试link与visited的区别。

总结

动态伪类是实现交互反馈的核心工具，而 LVHA 顺序原则是确保样式正确生效的 “红线”。掌握link、visited、hover、active的顺序逻辑，以及:focus的合理位置，能让链接和交互元素的样式既美观又符合用户操作预期。记住：顺序决定生效，细节决定体验。

7. 伪元素

伪元素（Pseudo-elements）：装饰元素特定部分的 “虚拟工具”

一、伪元素的核心概念与特点

伪元素是 CSS 中用于选择元素特定部分（如首行文本、首字母）或插入虚拟内容的特殊选择器，与伪类（选择元素状态）的核心区别在于：

作用对象：伪元素针对元素的 “部分内容”，伪类针对元素的 “整体状态”；
语法标识：推荐使用双冒号（::），如 ::first-line（兼容单冒号:，但双冒号更易区分伪类）；
虚拟性：不是真实 DOM 元素，仅通过 CSS 渲染，不影响 HTML 结构。

二、常用伪元素及实战应用

1. 文本特定部分选择：`::first-line` 与 `::first-letter`

这两个伪元素专门用于装饰文本的首行或首字母，适合排版美化（如书籍、文章标题）。

伪元素	作用	适用元素	核心特性
`::first-line`	选择元素的首行文本	块级元素（如`p`、`div`）	自动适应屏幕尺寸，首行范围随宽度变化
`::first-letter`	选择元素的第一个字符（或汉字）	块级元素（行内元素需设`display: block`）	可实现首字下沉等排版效果

示例 1：首行文本样式

p::first-line {
  color: #e74c3c; /* 首行文本红色 */
  font-weight: bold; /* 首行加粗 */
  font-size: 1.2em; /* 首行放大 */
}

效果：无论屏幕宽度如何变化，p标签中当前显示的第一行文本都会应用上述样式。

示例 2：首字母下沉

.article::first-letter {
  color: #3498db;
  font-size: 3em; /* 首字母放大 */
  float: left; /* 左浮动实现下沉 */
  line-height: 0.8; /* 调整行高避免错位 */
  margin-right: 5px; /* 与后续文本留间距 */
}

效果：文章第一个字（如 “今”）会放大并左浮动，模拟书籍的首字下沉效果。

2. 内容插入：`::before` 与 `::after`（高频使用）

这两个伪元素用于在元素内容的前后插入虚拟内容，常用于添加装饰性元素（如图标、分隔符），不污染 HTML 结构。

核心语法：必须配合 content 属性（即使内容为空），否则不生效。

.box::before {
  content: "★"; /* 插入内容（文本、空字符串或URL） */
  color: #f39c12; /* 装饰内容样式 */
  margin-right: 8px; /* 与主内容间距 */
}

.box::after {
  content: ""; /* 空内容可用于添加图形 */
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #2ecc71;
  border-radius: 50%; /* 圆形装饰 */
  margin-left: 8px;
}

效果：.box 元素的内容前会出现黄色五角星，内容后会出现绿色圆点，HTML 结构中无需额外标签。
常见用途：
- 添加图标（如用content: "→"作为箭头）；
- 清除浮动（::after { content: ""; clear: both; display: table; }）；
- 实现特殊形状（如通过边框和content模拟三角形）。

三、伪元素的使用注意事项

适用元素限制：
- ::first-line 和 ::first-letter 仅对块级元素生效，行内元素（如span）需设置 display: block 或 inline-block；
- ::before 和 ::after 插入的内容默认是行内元素，需通过 display 调整为块级或行内块级。
与伪类的区分：
- 伪类用单冒号（:），如 :hover（状态）；
- 伪元素推荐用双冒号（::），如 ::before（内容部分），避免混淆。
性能与维护：
- 装饰性内容优先用伪元素（如图标、分隔符），减少不必要的 DOM 元素；
- 复杂内容（如需要交互的元素）不适合用伪元素（无法绑定事件）。

四、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
伪元素基本概念	选择元素特定部分或插入虚拟内容，用`::`标识	与伪类的区别（内容部分 vs 元素状态）	⭐⭐
`::first-line`	选择首行文本，自动适应屏幕宽度	仅对块级元素生效，行内元素需转换显示类型	⭐⭐
`::first-letter`	选择首字母，实现首字下沉等效果	会包含首字母后的标点符号（如 “！”“，”）	⭐⭐
`::before`/`::after`	在内容前后插入虚拟内容，需配合`content`	必须设置`content`（即使为空），默认行内元素	⭐⭐⭐