CSS基础巩固-基础-选择

news2025/7/24 9:10:59

CSS是如何工作的？

当浏览器遇到无法解析的CSS代码时

如何导入CSS样式？

改变元素的默认样式

选择

前缀符号（后面会具体介绍）

优先级

同时应用样式到多个类上

属性选择器

伪类

伪元素

关系选择器

后代选择器

子代选择器

邻接兄弟

通用兄弟

注：本文以学习 Web 开发 | MDN为基础

CSS是如何工作的？

不同的浏览器引擎会有不同的方式，但有一些步骤是基本都会出现：

1.浏览器引擎载入HTML文件

2.将HTML转为DOM（就是我在index.html文章里面说的对象树

3.接下来，浏览器会拉取HTML相关的大部分资源，比如嵌入到页面的图片、视频、CSS样式等等，JS则会在稍后处理

4.在浏览器拉取到CSS后会进行解析，根据选择器的不同类型（比如 element、class、id等等）把他们分到不同的“桶”中/浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的类型，比如元素选择器、类选择器、id选择器等）应用到对应的DOM节点中，并添加节点依赖的样式（这个步骤称之为渲染树）

5.上述规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局

6.着色：网页在屏幕上显示

（CSS选择器：用于选中HTML元素并对其应用样式的一种语法规则；JS中也有用于选择页面元素的选择器）

对于DOM的理解会很大程度帮助你设计、调试和维护你的CSS，因为DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM来查看使用了哪些规则

比如一个HTML文件是

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

那么他的DOM是

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

在浏览器创造完DOM后，会解析CSS，可以看到唯一的选择器就是span元素选择器，

span {
  border: 1px solid black;
  background-color: lime;
}

当浏览器遇到无法解析的CSS代码时

什么都不会做，继续解析下一个CSS样式，也就是忽视错误部分

如何导入CSS样式？

和我在index里面说的一样：在开头通过 <link rel=" " href=" "> 来导入

样式化HTML元素

若要样式化一个文档中所有的段落，只需使用选择器p

比如HTML是

<h1>I am a level one heading</h1>

<p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="http://example.com">link</a>.</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item <em>three</em></li>
</ul>

CSS是

p,
h1 {
  color: blue;
}

p,
li {
  color: green;
}

得到

改变元素的默认样式

浏览器自带一个包含默认样式的样式表（比如标题会很大等等），如果我们对浏览器的默认样式不满意只需要选定那个元素，加一条CSS规则即可

想对一片区域内的元素应用样式

定义类 class

比如 <div class=" "> , <li class=" ">

选择

前缀符号（后面会具体介绍）

. 类选择器（同一个类可以被多个元素使用，用于标识一组相似的元素）

# ID选择器（一个页面只能有一个相同的ID）

无前缀元素选择器

* 通用选择器

[ ] 属性选择器（比如 <div class="not box"> 会被 div[class~="box"] 选中，因为后面的选择器是匹配 class属性中含有box单词的 div元素

: 伪类选择器

:: 伪元素选择器

空格后代选择器

> 子选择器

+ 相邻兄弟选择器

~ 通用兄弟选择器

优先级

!important声明 > 内联样式 > #ID > .类 > 元素 > *

同时应用样式到多个类上

逗号分隔

A,B{
}

属性选择器

[属性] 只要含有这个属性就匹配

[属性=“值"] 属性值等于值

[属性~="值"] 属性中包含某个词（空格分隔）

[属性|="值"] 属性以值开头或等于值

[属性^="值"] 属性以值开头

[属性$="值"] 属性值以“值”结尾

[属性*="值"] 属性值包含“值”（和～区别：不一定要空格分隔）

伪类

用于选择处于特定状态的现有元素

/* 状态伪类 */
a:hover { color: red; }           /* 鼠标悬停状态 */
input:focus { border: blue; }     /* 获得焦点状态 */
button:disabled { opacity: 0.5; } /* 禁用状态 */

/* 结构伪类 */
li:first-child { font-weight: bold; }  /* 第一个子元素 */
tr:nth-child(even) { background: #f0f0f0; } /* 偶数行 */

/* 内容伪类 */
p:empty { display: none; }        /* 空内容元素 */
div:not(.special) { color: black; } /* 排除特定类 */

伪元素

创建和样式化虚拟元素

伪元素并不会修改DOM，只是在渲染层面

/* 内容伪元素 */
.quote::before {
    content: """;
    font-size: 2em;
    color: #ccc;
}

.quote::after {
    content: """;
    font-size: 2em;
    color: #ccc;
}

/* 选择伪元素 */
p::first-line {
    font-weight: bold;
    color: blue;
}

p::first-letter {
    font-size: 2em;
    float: left;
}

/* 占位符伪元素 */
input::placeholder {
    color: #999;
    font-style: italic;
}