如果你想创建一个小程序，前端是必修课程，所以让我们从 CSS 开始吧。

css 的工作原理

每个 HTML 元素都有一组可以通过 css 设置的样式属性。当 HTML 元素的同一样式属性有多个样式值时，CSS 依靠级联逻辑来决定最终应用哪种样式。

HUGOMORE42

css规则

该规则实际上是一个完整的css指令。规则声明要修改的元素以及要应用于已修改元素的样式。

向文档添加样式的三种方法：

1. 写在元素标签中（也称为内联样式，它只能影响其所在的标签并覆盖嵌入样式和链接样式）
2. 写在标签中 （即嵌入样式，应用范围仅限于当前页面，页面样式会覆盖外部样式表中的样式，但会被内联样式覆盖）
3. 写入单独的css样式（也称为链接样式，样式表是一个扩展名为.css的文件。同一个样式表文件可以链接到任意数量的HTML页面。链接样式的范围是整个网站）

除了这三类添加之外，页面的Style方法还具有使用@import指令链接样式表中其他样式表的能力：例如，

@import url(css/styles.css)

@import指令必须是在样式页面中位于其他样式之前，否则@blowing； @import 引用的样式表未加载。 css 规则命名约定

可以通过三种方法来扩展此基本结构

第一种方法：一个规则中包含多个声明。

p {color: red; font-size: 12px; font-weight: bold;}

第二种方法：组合多个选择器。例如：如果您想要

• 和 ♶ d，你可以这样写：

  h1, h2, h3 {color: blue; font-weight: bold;}

  组选择器用逗号分隔

  第三种方法： 多个规则应用于一个选择器。
  例如，写完上面的规则后，如果你还想把 h3 变成斜体，你可以为 h3 单独写一个规则：

  h1, h2, h3 {color: blue; font-weight: bold;}
  h3 {font-style: italic;}

  用于选择特定元素的选择器

  有 3 个用于选择特定元素的运算符。一种

  1. 上下文选择器 。根据祖先或兄弟姐妹选择一个元素。
  2. ID 和类选择器。根据元素的 id 和 class 属性值选择元素。
  3. 属性选择器。根据元素的存在和属性选择元素。

  上下文选择器

  例如，如果我们想为文章的段落设置不同的字体大小，我们可以使用上下文选择器来解决问题。上下文选择器

  的格式为：

  tag 1 tag 2 {statement}

  其中 tag 2

  <p class="specialtext featured">Here the span tag <span> may or may not</span> be styled.</p>

  是 2 的目标，且仅当我们要选择 时 标签 1 . 仅当它是其祖先的元素时才选择此选项。

  上下文选择器，称为后代组合选择器，是一组用空格分隔的标签名称。标签用于选择特定祖先的后代的元素。

  article p {font-weight: bold;}

  在上面的示例中，只有作为article 后代的p 元素才应用以下样式。

  上下文选择器以空格分隔

  特殊上下文选择器

  • 子选择器 >

  格式如下：

  2 Tag ♷ 1 > 必须是 The 的父级标签

  不能是其他祖先元素。

  section > h2 {font-style: italic;}

  • 直接同级选择器 +

  的格式为：

  标签 1 + 标签 2

  标签 2 必须紧跟在当前同级标签 1 之后，并且标签 p 位于位置 h。在同一级别，标签 p 和 h2 彼此相邻。 （仅适用于 p-tag）

  • 通用同级选择器 ~

  格式如下：

  tag 1 ~ tag 2

  tag 2

  tag 2

  tag 2 标签 2 标签 2 后面必须跟有 同级标签 1 后面（可以是不连续的）。

  h2 ~ a {color: red;}

  标签 a 和标签 h2 处于同一级别，且标签 a 在标签 h2 之后。 （仅适用于标签）

  • 通用选择器 *

  通用选择器 * 是匹配任何元素的通配符。

  * {color: green;}

  此规则将所有元素（文本和边框）变为绿色。

  p * {color: red;}

  这条规则将p中包含的所有元素的文本变成红色。

  section * a {font-size: 1.3em;}

  section标签的所有非子标签（*均为子标签）的标签字体设置为1.3em；

  ID 和类选择器

  使用 ID 和类选择器，首先在 HTML 标签中向元素添加 ID 和类属性。

  Id 和 class 属性可以设置为任意值，但不能以数字或特殊符号开头

  Class 属性

  将特殊文本类添加到 h1 标签。类选择器

  <h1 class="specialtext">This is text</h1>

  的格式为：

  。类名称

  类选择器使用点 (.) 后跟类名称。带类选择器

的标签

• 的格式为：

  标签 1. 类名称

  例如：

  p.specialtext {color: red;}

  仅对具有特殊文本类的 p 标签有效。

  • 多类选择器

  可以向一个元素添加多个类：

  <p class="specialtext featured">Here the span tag <span> may or may not</span> be styled.</p>

  多个类的名称放在同一对引号中，并用空格分隔。

  要选择具有两个类名的元素，可以这样写：

  .specialtext.featured {font-size: 120%;}

  CSS选择器的两个类名中没有空格。添加后，它成为祖先/后代关系的上下文选择器。

  ID属性

  ID属性的写法与class类似，用#表示。

  <p id="specialtext">This is text</p>

  上面的p标签指定了id属性的特殊文本。

  对应的ID选择器写法如下：

  #specialtext {css样式}

  其余元素选择方法与类相同。

  ID 属性和类属性

  • ID 之间的区别可用于页面导航链接。
    例如：

  <a href="#bio">Biggraphy</a>

  用户单击此链接并滚动到 ID 值为 bio 的位置。如果href属性中只有一个#，点击链接就会弹出。如果需要，

  • ID 值是唯一的。
  • 类的目的是识别一组具有相同属性的元素，以便我们可以将相同的CSS样式应用于这些元素。

  属性选择器

  属性名称选择器

  格式如下：

  标签名称[属性名称]

  随属性选择任意名称。

  例如：

  img[title] {border: 2px solid blue;}

  此规则选择具有 title 属性的 HTML img 元素。标题可以是任何值。

  属性值选择器

  格式如下：

  标签名称[属性名称=“属性值”]（在HTML5中属性值不需要加引号）❀例如：该规则选择具有 title 属性的 HTML img 元素，且 title 值为“红花”。

  伪类

  伪类分为两种类型：

  1. UI 伪类在 HTML 元素处于某种状态时将 CSS 样式应用到 HTML 元素。
  2. 当标记中存在结构关系时，结构化伪类将 CSS 样式应用于相应的元素。

  伪类使用：（冒号）作为选择器。
  两个冒号 (::) 表示新的伪元素。

  UI 伪类

  UI 伪类根据特定 HTML 元素的状态应用样式。

  链接伪类

  链接有 4 个伪类：

  • 链接。此时，链接
  • Visited 被点击。当用户单击链接时，
  • 将光标悬停。光标链接到
  • 活动。单击链接

  使用示例：

  a:link {color: black;}
  a:visited {color: blue;}
  a:hover {text-decoration: none;}
  a:active {color: red;}

  浮动伪类可以应用于任何元素。

  p:hover {background-color: gray;}

  ：焦点伪类

  可以应用于任何元素。

  单击时聚焦。

  ：目标伪类

  可以应用于任何元素。
  如果用户单击指向页面上另一个元素的链接，则该元素就是目标，可以使用 :target 命令进行选择。

  例如：

  <a href="#more_info">More Infomation</a>

  应用伪类后，目标是ID为more_info的元素。单击标签将应用 css 样式。

  css 规则是：

  #more_info:target {background: #eee;}

  结构化伪类

  ：第一个子元素和：最后一个子元素 第一个元素的第一个元素d：第一个子元素 ：最后一个子元素child 表示一组姐妹元素中的最后一个元素

:nth-child

规则如下：

e:nth-child(n)

e 表示元素名称，n 表示数值。

例如：

li:nth-child(3)

从列表集中选择每三个项目。

伪元素

伪元素是不在文档中的元素。
最常用的伪类是：

::第一个字母

要选择第一个字母，请使用规则：。

::first-line

选择段落的第一行。

e::first-line

::​​before 和 ::after

的使用规则如下：

e::before
e::after

可用于在特定元素之前或之后添加特殊内容。

上面的 CSS 选择器已经实现。接下来，我们解决大型样式表中的规则选择问题。

CSS 提供了三种机制来确定哪条规则获胜：

• 继承
• 级联
• 具体而言，

S 个属性值❀ 是继承的。
例如，如果我们添加这样一条规则：

body: {font-family: arial;}

，那么文档中的所有元素都会继承这个样式。

级联

级联是在文档层次结构中逐层应用样式的过程。目标是让浏览器看到标签特定属性值的多个来源并确定最终使用哪个值。每页样式源）顺序）

浏览器按上述顺序依次检查每个源中的样式，并更新每个标记的属性值（如果已设置）。整个检查和更新过程完成后，就会显示每个标签的最终样式。

例如，如果作者链接到将 p 字体设置为 Helvetica 的样式表，并且页面具有使用相同选择器将字体类型设置为 Verdana 的嵌入规则，则段落文本最终会变为 Verdana。 因为浏览器在读取链接的样式表后读取嵌入的样式。

级联规则

级联规则1：查找适用于每个元素和属性的所有声明。

堆叠规则2：按照顺序和重量排序。浏览器一次检查五个源并设置适当的属性。如果在以下源中定义了匹配的属性，它将更新该属性的值。

也可以考虑语句。例如：

p {color: green !important; font-size: 12pt;}

空！重要的分号（;）用于增加句子的重量。

这条规则增加了将文本变成绿色的权重。因此，即使级联中的下一个源为该段设置了不同的颜色，最终的颜色仍然是绿色。

第三层分层规则：根据品种特异性程度。特异性表明规则的具体程度。

例如，如果样式表包含以下规则：

p {font-size: 12px;}
p.largetext {font-size: 16px;}

<p class="largetext">A bit of text</p>

则上面的 p 标记将显示 16px 文本，因为第二条规则的选择器同时包含标记名称和类名称（非常具体）。

如果是以下样式：

p {font-size: 12px;}
.largetext {font-size: 16px;}

<p class="largetext">A bit of text</p>

仍然会显示16个像素，因为类别非常具体。

分层法则四 顺序决定重量。如果两个规则都影响元素的属性并且具有相同的特异性，则较晚出现的规则获胜。

特异性计算

有一个称为“ICE”公式的评价规则来计算特异性：

I-C-EE 三个实数元素C(CI)个数但0-1-12小于0-2- 0。

ICE评分规则如下：

1. 投票者有ID，位置1见附件一；
2. 选择器中有一个类，C加1；
3. 选择器有元素，E加1；
4. 得到一个三位数。† p# 大文本1-0-1body p#大文本1-0-2body p#大文本 ul.mylist1-大文本

   1 --3 .mylist li	1-1-4

   简化版级联规则

   1. 包含ID的选择器优于包含类的选择器，包含类的选择器优于包含标签的选择器。
   2. 如果样式为同一标签的同一属性定义多个源，则内联样式将覆盖内联样式，内联样式将覆盖链接样式。在链接的样式表中，在具有相同特性的样式中，后声明的样式优先。
   3. 规则一胜过规则二。
   4. 定义覆盖继承样式的样式。

   在这篇文章中，我们将主要介绍CSS规则以及如何使用它们将样式应用到HTML。

   作者：Goodspeed
   链接：https://juejin.im/post/596f6c1e51882526426624ad
   版权来源：掘金属于作者。商业转载请联系作者获取授权。非商业转载请注明出处。