青训营

用户4738855737073
28 阅读5分钟

css选择器

我们在一个页面里边会写多个选择器,这些选择器有可能会选择选择到同样的一个元素。那这种情况我们看如何处理呢？会出现什么情况呢？我们看看下边的代码。

js
 代码解读
复制代码
<article>
<h1 class="title">拉森火山国家公园</h1>
</article>

<style>
.title{
  color:blue; 
}
article h1{
color:red;
}
</style>

css选择器

这就涉及到了选择器的优先级的问题了,那怎么决定多个选择器匹配到一个元素后,最终这个元素采用哪个选择器的样式呢？它其实是根据特异度值来决定的,越特殊的选择器,优先级越高。

536bf555195a9548d81365580ac6bb0.jpg 特异度的计算遵循以下规则：

  1. 内联样式：如果样式是直接写在HTML标签的style属性中的，则计为 1000。
  2. ID选择器：每个ID选择器增加 100。
  3. 类选择器、属性选择器和伪类：每个类选择器、属性选择器或伪类增加 10。
  4. 标签选择器和伪元素：每个标签选择器或伪元素增加 1。
  5. 通用选择器（*）、子组合器（>）、相邻兄弟选择器（+）、一般兄弟选择器（~） ：这些不增加特异度值。

由此其实我们可以很清楚的看到只要是内联样式的话那就是最高了。然后是ID>类>(伪)类选择器>标签选择器和伪元素 我们可以依据这些简单的看出特异度的大小。值得提一嘴的是如果加上了！important的话那么特异度就特别的高了。

css继承

css里边的子元素一些属性它会自动的继承父元素的计算值。除非我们显示的指定其它值。我们看下具体的例子。

js
 代码解读
复制代码
<p>This is a <em>test</em>
of<strong>inherit</strong>
</p>
<style>
body {
font-size:20px;
}
p{
color:blue;
}
em {
color:red
}

c79eb2a2ef53e4dc70dc09b299c5da3.jpg

这就是显示的效果。 标签并没有给它赋值颜色属性但它能继承父元素的属性。并不是所有属性都能继承,像宽度、高度是不可继承的。但是像文子的颜色字体大小这些就是就是可以继承的。 像这些不可继承的属性如果我仍然想继承的话那么我可以显示的继承。下边的代码便可以实现box-sizing这个属性的显示继承。

js 代码解读 复制代码 *{ box-sizing:inherit }### 浏览器解析HTML的过程浏览器解析 HTML 的过程包括加载 HTML 文档、构建 DOM 树、解析并加载外部资源（如 CSS 和 JavaScript）、构建 CSSOM 树、组合 DOM 和 CSSOM 树生成渲染树、计算每个节点的布局位置、并将渲染树绘制到屏幕上以显示页面内容。以下是详细的介绍！！可以帮助我们理解清楚！1. 加载 HTML 文档当用户请求一个网页时，浏览器会从服务器下载 HTML 文件。这个过程通常通过 HTTP 或 HTTPS 协议完成。2. 构建 DOM 树浏览器开始解析 HTML 文档，将其转换为一个文档对象模型（DOM）树。DOM 树是一个层次结构，表示文档的所有元素及其关系。解析过程：词法分析（Lexical Analysis）：浏览器首先将 HTML 文档分解成一个个的标记（tokens），这些标记是 HTML 语法的基本单元。 语法分析（Syntax Analysis）：然后，浏览器将这些标记组合成一个抽象语法树（AST），这个树结构反映了 HTML 文档的逻辑结构。 构建 DOM 树：最后，浏览器根据 AST 构建 DOM 树。每个节点代表一个 HTML 元素，节点之间的关系反映了元素之间的嵌套关系。3. 解析外部资源在构建 DOM 树的过程中，浏览器会遇到各种外部资源，如 CSS 文件、JavaScript 文件、图片等。这些资源需要单独加载和解析。外部资源加载：CSS 文件：浏览器会发起新的网络请求来加载 CSS 文件，并在解析完成后将其应用到 DOM 树上。 JavaScript 文件：浏览器会暂停 HTML 解析，直到 JavaScript 文件加载并执行完毕。这是因为 JavaScript 可能会修改 DOM 树。 图片和其他资源：这些资源通常不会阻塞 HTML 解析，但会并行加载。4. 构建 CSSOM 树浏览器解析加载的 CSS 文件，构建 CSS 对象模型（CSSOM）树。CSSOM 树描述了文档中每个元素的样式规则。5. 组合渲染树渲染树是 DOM 树和 CSSOM 树的结合体，它包含了所有可见的节点及其样式信息。渲染树构建：过滤不可见节点：浏览器会过滤掉不可见的节点，如 display: none 的元素。 组合节点：将 DOM 树中的每个节点与其对应的 CSSOM 规则结合起来，形成渲染树节点。6. 布局（Layout）浏览器计算每个渲染树节点的位置和大小。这个过程也称为重排（reflow）。布局步骤：初始布局：浏览器从根节点开始，递归地计算每个节点的位置和大小。 优化布局：浏览器会尽量减少不必要的重排操作，提高性能。7. 绘制（Painting）浏览器将渲染树节点绘制到屏幕上。这个过程也称为重绘（repaint）。绘制步骤：生成绘制指令：浏览器生成一系列绘制指令，描述每个节点的绘制细节。 执行绘制指令：浏览器按照绘制指令将内容绘制到屏幕上。8. 用户交互和事件处理一旦页面渲染完成，用户可以与页面进行交互。浏览器会监听用户输入并触发相应的事件处理程序。用户交互：鼠标点击：触发点击事件。 键盘输入：触发按键事件。 滚动：触发滚动事件。9. 动态更新页面内容可能会因用户交互或 JavaScript 执行而发生变化。每当 DOM 树或 CSSOM 树发生变化时，浏览器会重新计算布局并重新绘制受影响的部分。

avatar
文章
阅读
粉丝