2. 学习笔记：CSS选择器、继承与布局

课程介绍：在了解CSS基本原理后，本节课程进一步深入讨论CSS的选择器特异度，以具体案例对其展开讲解。同时，课程还涉及CSS继承与布局的内容。学习者将了解选择器的优先级计算规则，CSS属性如何在元素之间继承，以及CSS布局方式及相关技术的介绍。

课程重点：

CSS的工作原理

CSS的工作原理是指在浏览器中，CSS是如何应用于HTML文档以控制样式和布局的。简单来说，CSS的工作原理包括选择器选择元素、计算样式规则和应用样式三个主要步骤。

1. 选择器选择元素

CSS通过选择器来选取HTML文档中的元素。选择器可以根据元素的标签名、类名、ID、属性等进行选择。当浏览器解析HTML文档时，它会根据CSS样式表中的选择器来确定哪些元素需要应用哪些样式。

通配选择器（*）

对所有的元素设置样式

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

标签选择器

对特定的标签设置样式

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

id选择器

注意：id（identification）值在页面中应该是唯一的

<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

类（class）选择器

为同一类型的标签设置样式

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

属性（attribute）选择器

通过属性或者属性值设置样式

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

伪类选择器

伪类选择器（pseudo-classes selector）是CSS中一种特殊的选择器，它允许我们根据元素的状态或特定条件来选择和样式化元素。伪类选择器以冒号（:）作为前缀，用于指定元素的特殊状态或位置。

常见的伪类选择器包括：

:hover：当鼠标悬停在元素上时触发，常用于实现交互效果。
:active：当元素处于活动状态（比如被点击时）触发，常用于按钮或链接的样式改变。
:focus：当元素获得焦点时触发，通常用于表单元素的样式调整。
:visited：选择之前访问过的链接，用于改变已访问链接的样式。
:first-child：选择父元素的第一个子元素。
:last-child：选择父元素的最后一个子元素。
:nth-child(n)：选择父元素的第n个子元素。
:nth-of-type(n)：选择父元素中特定类型的第n个子元素。
:not(selector)：选择不符合指定选择器的元素。
:checked：选择表单中已被选中的复选框或单选按钮。

这些伪类选择器可以与其他选择器组合使用，以更精确地选择元素，并应用相应的样式。伪类选择器在前端开发中非常有用，能够增加页面的交互性和视觉效果，同时提高用户体验。

CSS中的伪类选择器可以分为两类：状态型伪类和结构性伪类。

状态型伪类（State pseudo-classes）

状态型伪类基于元素的特定状态来选择元素，常用于实现交互效果和样式改变。常见的状态型伪类有：

:hover：当鼠标悬停在元素上时触发。
:active：当元素处于活动状态（比如被点击时）触发。
:focus：当元素获得焦点时触发，通常用于表单元素的样式调整。
:visited：选择之前访问过的链接，用于改变已访问链接的样式。
:checked：选择表单中已被选中的复选框或单选按钮。

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

结构性伪类（Structural pseudo-classes）

结构性伪类基于元素在其父元素中的位置和结构关系来选择元素。常用于对特定位置的元素应用样式。常见的结构性伪类有：

:first-child：选择父元素的第一个子元素。
:last-child：选择父元素的最后一个子元素。
:nth-child(n)：选择父元素的第n个子元素。
:nth-of-type(n)：选择父元素中特定类型的第n个子元素。
:not(selector)：选择不符合指定选择器的元素。

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

差异和使用场景

结构性伪类主要用于选择特定位置的元素，比如第一个元素、最后一个元素或特定类型的第几个元素。而状态型伪类则基于元素的交互状态来选择元素，常用于实现悬停效果、点击效果和表单元素的状态样式。结合使用这两类伪类选择器，可以更精确地选择和样式化网页中的元素，实现更丰富多样的效果和布局。

结构性伪类和状态型伪类的组合使用

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: pink; // line 3, 6, 7
  }

  article > p {
    color: blue; // line 3
  }

  h2 + p {
    color: red; // line 6
  }
</style>

2. 计算样式规则

一旦选择器选取了特定的HTML元素，浏览器就会根据选择器所对应的样式规则来计算应用在这些元素上的样式。样式规则包括了诸如颜色、字体、边框等属性和属性值。

3. 应用样式

浏览器根据选择器和样式规则的计算结果，将对应的样式应用到选取的HTML元素上。这样，网页中的元素就会根据CSS的样式规则进行美化和布局。

CSS的工作原理是在浏览器渲染网页时，通过解析CSS样式表中的规则，选择并应用合适的样式到HTML元素上，从而实现网页的外观和布局控制。这使得开发者可以通过CSS轻松地改变网页的外观和布局，提供更好的用户体验。同时，CSS的样式规则可以通过层叠和继承的机制，让开发者更灵活地控制网页的样式，提高代码的可维护性和复用性。

在前端开发中，有三种主要的树结构与网页渲染密切相关，它们分别是HTML文档树（DOM树）、CSS对象模型树（CSSOM树）和渲染树（Render Tree）。它们在网页的构建、样式计算和渲染过程中起着重要的作用。

1. HTML文档树（DOM树）
DOM树是由浏览器根据HTML文档解析得到的一种树状结构，它表示了HTML文档的逻辑结构。每个HTML元素都在DOM树中表示为一个节点，它们按照父子关系进行组织。DOM树中的每个节点代表了文档的一部分，包括标签、文本、属性等信息。JavaScript可以通过DOM树来访问和操作网页的内容和结构。

2. CSS对象模型树（CSSOM树）
CSSOM树是由浏览器根据CSS样式表解析得到的一种树状结构，它表示了CSS样式在文档中的层叠和继承关系。每个CSS样式规则都在CSSOM树中表示为一个节点，包括选择器和样式属性。CSSOM树与DOM树相互独立，但是在构建渲染树时，会合并DOM树和CSSOM树，以计算出最终的样式规则。

3. 渲染树（Render Tree）
渲染树是由浏览器根据DOM树和CSSOM树合并计算得到的一种树状结构，它表示了网页的可视和渲染信息。渲染树中的每个节点对应着网页中可见的元素，但不包括那些在CSS中被设置为display:none的元素。渲染树中的每个节点都包含了元素的样式信息，并按照从上到下的顺序进行排列，用于后续的布局和绘制操作。

在渲染过程中，浏览器会根据渲染树进行布局（Layout）和绘制（Paint），最终将网页显示在用户的屏幕上。这三种树结构之间的关系和合并过程是网页渲染过程中的重要步骤，同时也是前端开发中需要了解和优化的关键点。

CSS选择器的特异度：学习如何计算选择器特异度，即不同选择器的优先级，以便更好地理解和掌握CSS样式在页面中的应用顺序。
CSS继承：学习CSS属性在父元素和子元素之间的继承机制，这可以减少在样式表中的重复定义，提高代码的复用性和效率。
CSS求值过程解析：了解CSS样式计算的过程，包括继承、选择器特异度计算等，以加深对CSS样式生效规则的理解。
CSS布局方式及相关技术：重点介绍CSS盒模型中的"行级"和"块级"布局结构，包括它们的基本定义、特征、工作属性和排版规则。这些内容将有助于提升学习者在CSS实战中的技能和操作能力。

课程收获：通过学习本节课程，我们将对CSS的选择器特异度有更深入的理解，能够更灵活地运用样式规则。同时，了解CSS属性继承的作用，让我们在编写样式时更高效。最后，深入了解CSS布局方式及相关技术，可以帮助我们更好地掌握盒模型中的"行级"和"块级"布局结构，提升CSS实战的能力和应用水平。

CSS基础 ｜ 青训营