这是我以前学的时候记的东西了，最近想把关于计算机的东西清理出电脑，就发出来了。也没什么用，详细的还是去看时文档比较靠谱。如果出现☆就证明是CSS3才有的嗷。
文章目录
网页分成三个部分：
结构（HTML）
表现（CS）
行为（JavaScript）
网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层。总之一句话，CSS用来设置网页中元素的样式。
使用CSS来修改元素的样式：
- 第一种方式（内联样式，行内样式）:
在标签内部通过 style属性来设置元素的样式
问题：
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中都复制一遍
并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便注意:开发时绝对不要使用内联样式 - 第二种方式（内部样式表）
将样式编写到head中style的标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
内部样式表更加方便对样式进行复用
问题：
我们的内部样式表只能对一个网页起作用，
它里边的样式不能跨页面进行复用 - 第三种方式（外部样式表）最佳实践
可以将ss样式编写到一个外部的CSS文件中I
然后通过link标签来引入外部的css文件
外部样式表需要通过link标签进行引入，
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，
从而加快网页的加载速度，提高用户的体验。
CSS中的注释/*我是注释*/，注释中的内容会自动被浏览器所忽略
选择器
叫选择符啊什么的也行
选择器声明块
选择器，通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以：连接，以；结尾
元素选择器
通配选择器
作用：选中页面中的所有元素
语法：* { }
类型选择符
作用：根据标签名来选中指定的元素
语法：E { }
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{ }
类选择器
作用：根据元素的 class属性值选中一组元素
语法：.class属性值{ }
复合选择器
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{ }
下图是将类名为b且类型为p的元素变为蓝色
并集选择器
作用：选中复合任一条件的元素
语法：选择器1，选择器2，选择器3，选择器n{ }
下图中是将类名为a、b的元素和h1变为蓝色
关系选择器
- 父元素 直接包含子元素的元素叫做父元素
- 子元素 直接被父元素包含的元素是子元素
- 祖先元素 直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素 - 后代元素 直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素 - 兄弟元素 拥有相同父元素的元素是兄弟元素
包含选择符、子选择符
E F 选择所有被E元素包含的F元素，包含所有后代元素。
E>F 选择所有作为E元素的子元素F，只包含子元素。
相邻选择符
E+F选择紧贴在E元素之后F元素。
下图中有两个类名为a，但是只有第二个变蓝了，证明E+F只有在E后面只有F的时候才会成立。
兄弟选择符
E~F☆选择E元素所有兄弟元素F。
属性选择器
E[name]选择含有指定属性的元素
E[name="val"] 选择含有指定属性和属性值的元素
E[name~="val"]选择具有指定属性，属性值是用空格分隔的字词列表，其中一项与val相同。
E[name|="val"]选择具有指定属性，且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
E[name^="val"]☆选择属性值以指定值开头的元素
E[name$="val"]☆选择属性值以指定值结尾的元素
E[name*="val"]☆选择具有att属性且属性值为包含val的字符串的E元素。
伪类选择器
伪类用来描述一个元素的特殊状态
| 选择符 | 版本 | 描述 | 其他 |
|---|---|---|---|
| E:link | 设置超链接a在未被访问前的样式。 | ||
| E:visited | 设置超链接a在其链接地址已被访问过时的样式。 | 由于隐私的原因，所以 visited这个伪类只能修改链接的颜色 | |
| E:hover | 设置元素在其鼠标悬停时的样式。 | ||
| E:active | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 | 就是点住不松手时候的效果 |
示例：
<style>
a:link{color: black;}
a:hover{font-size: 30px;}
a:visited{color: gray;}
a:active{background-color: pink;}
</style>
这个gif截图时候不显示鼠标，你们自己感受一下就好。字突然变大就是我把鼠标挪上去了，背景变粉色就是我点上去了。
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:not(s) | CSS3 | 匹配不含有s选择符的元素E。 |
| E:root | CSS3 | 匹配E元素在文档的根元素。 |
| E:first-child | 匹配父元素的第一个子元素E。 | |
| E:last-child | CSS3 | 匹配父元素的最后一个子元素E。 |
| E:only-child | CSS3 | 匹配父元素仅有的一个子元素E。 |
| E:nth-child(n) | CSS3 | 匹配父元素的第n个子元素E。 |
| E:nth-last-child(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
| E:first-of-type | CSS3 | 匹配父元素下第一个类型为E的子元素。 |
| E:last-of-type | CSS3 | 匹配父元素下的所有E子元素中的倒数第一个。 |
| E:only-of-type | CSS3 | 匹配父元素的所有子元素中唯一的那个子元素E。 |
| E:nth-of-type(n) | CSS3 | 匹配父元素的第n个子元素E。 |
| E:nth-last-of-type(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:focus | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。 | |
| E:lang(fr) | 匹配使用特殊语言的E元素。 | |
| E:empty | CSS3 | 匹配没有任何子元素（包括text节点）的元素E。 |
| E:checked | CSS3 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
| E:enabled | CSS3 | 匹配用户界面上处于可用状态的元素E。 |
| E:disabled | CSS3 | 匹配用户界面上处于禁用状态的元素E。 |
| E:target | CSS3 | 匹配相关URL指向的E元素。 |
| @page:first | 设置页面容器第一页使用的样式。仅用于@page规则 | |
| @page:left | 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则 | |
| @page:right | 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则 |
伪元素
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:first-letter/E::first-letter | CSS1/3 | 设置对象内的第一个字符的样式。 |
| E:first-line/E::first-line | CSS1/3 | 设置对象内的第一行的样式。 |
| E:before/E::before | CSS2/3 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E:after/E::after | CSS2/3 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E::selection | CSS3 | 设置对象被选择时的颜色。 |
| E::placeholder | CSS3 | 设置对象文字占位符的样式。 |
版本一栏CSS m/n表示在m版本就出现了，但是在n版本做了补充。
推荐一个CSS选择器的小游戏
选择器练习：餐厅
游戏网址：https://flukeout.github.io/
项目地址：https://github.com/flukeout/css-diner
蓝色区域待选中的元素会一直抖动，你把鼠标移上去，黄色区域的代码就会高亮，提示你你要选哪一部分。你在红色区域输入选择器即可，不过不会的话，右边绿色区域会有提示。
其他
样式的继承
我们为一个元素设置的样式同时也会应用到它的后代，继承是发生在祖先后代之间的
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素这样只需设置一次即可让所有的元素都具有该样式
注意： 并不是所有的样式都会被继承：比如背景相关的，布局相关等的这些样式都不会被继承。一般只有文字文本具有继承性。
如图，我给父元素设置了背景颜色和文字颜色，右边图里看得出来字的颜色变了，这是文字具有继承性。但是里边的盒子颜色也是棕色，（不是说背景不继承吗？）
打开控制台看看：确实是只继承了字体颜色，背景颜色是因为你不设置的话默认是透明的。
选择器的权重
当我们通过不同的选择器，选中相同的元素并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
1.选择器的权重如下，即内联选择器最高，通配选择器最低。如果对同一个元素设置，只有选择器权重最高的那个生效。
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承的样式 无
2.比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，比如类选择器再高也不会超过id选择器（不会有人傻到11个选择器写一起。）
例如下图，#d1权重为100，#d1，#d2权重为200
3.如果优先级计算后相同，此时则优先使用靠下的样式
4.可以在某一个样式的后边添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式
注意：!important在开发中这个玩意一定要慎用
