CSS基础巩固-基础-选择-EW帮帮网

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

CSS基础巩固-基础-选择

CSS是如何工作的？