CSS基础巩固-基础-选择

目录

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;
}

关系选择器

注意CSS解析是从右到左（在我的创业分析平台index.html 文章里面有样例）

后代选择器

空格

.box p {color: red;
}

子代选择器

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为<article>的直接子元素的<p>元素：

article > p

邻接兄弟

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<p>元素之后的<img>元素：

p + img

通用兄弟

如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。要选中所有的<p>元素后任何地方的<img>元素，我们会这样做：

p ~ img