CSS设计指南---CSS工作原理

最新推荐文章于 2025-04-30 13:19:47 发布

怎么啥都不会

最新推荐文章于 2025-04-30 13:19:47 发布

阅读量847

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/weixin_40794404/article/details/118060498

版权

本文详细介绍了CSS的工作原理，包括文档对象模型DOM、为文档添加样式的方法、各种选择符（上下文、ID和类、属性）、伪类和伪元素的概念及其用法。此外，还深入探讨了CSS中的继承机制、层叠规则以及如何计算特指度，帮助读者更好地掌握CSS设计和布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS设计指南—CSS工作原理

教材: CSS设计指南

文档对象模型(DOM)

DOM 是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在CSS 中引用DOM 中特定的位置，就可以选中相应的HTML 元素，并修改其样式属性。
例如

<body>
	<article>
		<h1>Contextual selectors are <em>very</em> selective</h1>
		<p>This example shows how to target a <em>specific</em> tag.</p>
	</article>
	<aside>
		<p>Contextual selectors are <em>very</em> useful!</p>
	</aside>
</body>

在这里插入图片描述

文档添加样式

为文档添加样式的三种方法

行内样式(作为元素属性，在元素处操作，只能影响这一个元素)
嵌入样式(在<head>里操作，只影响当前页面)
链接样式(单独的CSS文件，多个HTML可以用同一个样式)

还有一种在样式表中链接其他样式表的方法，那就应用
@import 指令（是一种at 规则）：

@import url(css/styles2.css)

要注意的是，@import 指令必须出现在样式表中其他样式之前，否则@import 引用的样式表
不会被加载。

选择符

所有用于选择特定元素的选择符又分三种

上下文选择符。基于祖先或同胞元素选择一个元素。
ID 和类选择符。基于id 和class 属性的值（你自己设定）选择元素。
属性选择符。基于属性的有无和特征选择元素。

上下文选择符

标签1 标签2 {
   声明}

选择祖先元素(不一定是父元素)为标签1的标签2，用空格作分隔符。

子选择符

标签1 > 标签2

选择父元素为标签1的标签2。

紧邻同胞选择符

最低0.47元/天解锁文章