本文共 4952 字，大约阅读时间需要 16 分钟。
本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷
通过之前的文章，我们已经发现，如果只有标签结构，那么整体的内容就会显得十分空洞。现在通过CSS就能够对这些页面中元素的表现进行设计。CSS 的作用就是用来为网页创建样式表，通过样式表可以对网页进行装饰。
CSS 的样式表 由一个一个的样式构成，一个样式又由选择器和声明块构成。基本语法：
选择器 { 样式名: 样式值; 样式名: 样式值; } 如果想让它起作用，我们需要将其写到<style>标签中。
简单使用例：
示例 我是H1
今天天气真不错！
今天天气真不错！
今天天气真不错！
今天天气真不错！
除此以外，CSS 代码还可以写在其它位置。
行内样式： 直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。
这种方式和用 style 标签相比，编写简单，定位准确。但是由于直接将 css 代码写到了 html 标签的内部，导致结构与表现耦合，同时导致样式不能够复用（即该样式只能对这一个标签生效），所以这种方式通常不使用。
而对于第一种用 style 标签，这就是通常选择使用的方式，我们可以同时为多个元素设置样式，并且让 CSS 代码独立于 HTML 代码。但在项目中，我们可能会想让相同的 CSS 代码在多个页面中生效，这时我们可以使用 外部样式表，也就是将所有的样式保存到一个外部的 CSS 文件中，然后通过 <link> 标签将这个样式表引入到页面即可。
从外部引入这种方式就可以在多个页面中引入了。同时这种将样式编写到外部的CSS文件中的方式，还可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。这是在开发中使用最多的方式。
例：
示例 今天天气真不错！
落霞与孤鹜齐飞，秋水共长天一色
少小离家老大回，乡音无改鬓毛衰
style.css：
p{ color: tomato; font-size: 50px;} 在本文中，样式都是比较简单的，比如：color（颜色）、font-size（字体大小）。后续还会有很多用法，需要和HTML整体来看。因此本文中将先只对选择器进行介绍。其它用法将在之后的文章中介绍。
通过上面的使用例子，我们已经知道了，选择器会告诉浏览器网页上的哪些元素需要设置什么样的样式。p 这个选择器就表示选择页面中的所有的 p 元素，在选择器之后所设置的样式会应用到所有的p元素上。而这种选择器，叫做元素选择器（ 标签选择器 ）。
元素选择器：可以根据标签的名字来从页面中选取指定的元素。
语法：
标签名 { } 在第 ① 篇文章中提到了，每个标签都有 id 和 class 两个属性。现在这两个属性就可以使用了。
类选择器：根据元素的 class 属性值选取元素。
语法：
.className { } 注意类名（class）前要加一个 .
比如 .hello 会选中页面所有class属性为hello的元素。
ID选择器，可以根据元素的 id 属性值选取元素。
语法：
#id { } 注意 id 前要加一个 #
比如#box会选中页面中id属性值为box的元素，和class属性不同，id属性是不能重复的。
通用选择器，可以同时选中页面中的所有元素。
语法：
* { } 例：
常用选择器 我是标题
少小离家老大回
乡音无改鬓毛衰
儿童相见不相识
笑问客从何处来
秋水共长天一色
落霞与孤鹜齐飞
复合选择器：可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。
语法：
选择器1选择器2{ } 注意：选择器1和2之间没有空格。
例如：div.box1 会选中页面中具有box1这个class的div元素。
群组选择器：可以同时使用多个选择器，多个选择器将被同时应用指定的样式。
语法：
选择器1,选择器2,选择器3 { } 比如：p,.hello,#box 会同时选中页面中p元素，class为hello的元素，id为box的元素。
例：
复合选择器 我是div我是p元素
我是div2标题
哈哈
在第 ① 篇文章中提到了，标签之间存在着一些关系，现在对这些关系再做一些说明，这将有助于对 CSS 选择器用法的使用。
• 祖先元素
– 直接或间接包含后代元素的元素。
• 后代元素
– 直接或间接被祖先元素包含的元素。
• 父元素
– 直接包含子元素的元素。
• 子元素
– 直接被父元素包含的元素。
• 兄弟元素
– 拥有相同父元素的元素。
后代选择器：根据标签的关系，为处在元素内部的后代元素设置样式。
语法：
祖先元素 后代元素 后代元素 { } 注意：元素名之间有空格。
比如：p strong 会选中页面中所有的p元素内的strong元素。
子元素选择器：给一个元素的子元素设置样式。
语法：
父元素 > 子元素{ } 比如：body > h1 将选择body子标签中的所有h1标签。
除了根据祖先父子关系，还可以根据兄弟关系查找元素。
语法：
查找后边一个兄弟元素
兄弟元素 + 兄弟元素{ } 查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{ } 例：
关系选择器 我是一个div我是div外的span我是div中的p元素 我是p元素中的span
我是div中的span元素 我是div中的span元素 我是div中的span元素 我是div中的span元素
属性选择器可以挑选带有特殊属性的标签。
语法:
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
例：
属性选择器 少小离家老大回
乡音无改鬓毛衰
儿童相见不相识
笑问客从何处来
秋水共长天一色
落霞与孤鹜齐飞
有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。
• 正常链接a:link
• 访问过的链接a:visited（只能定义字体颜色）
• 鼠标滑过的链接a:hover
• 正在点击的链接a:active
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）。伪元素使用 :: 开头，比如：
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
（before 和 after 必须结合content属性来使用）
例：
a元素的伪类 访问过的链接 没访问过的链接
例：
伪元素选择器 Hello Hello How are youLorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
:first-child 选择第一个子标签
:last-child 选择最后一个子标签
:nth-child 选择指定位置的子元素`
:first-of-type :last-of-type :nth-of-type 选择指定类型的子元素
否定伪类可以帮助我们选择不是其他东西的某件东西。
语法:
:not(选择器){ } 比如：p:not(.hello)表示选择所有的p元素但是class为hello的除外。
例：
伪类选择器
在 CSS 中祖先元素的样式会被子元素继承。继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。
比如：为父元素设置了字体颜色，子元素也会应用上相同的颜色。但并不是所有的样式都会被继承，比如和背景相关的，布局相关等的这些样式都不会被继承。
例：
样式的继承 我是一个p元素 我是p元素中的span
我是p元素外的span我是div 我是div中的span 我是span中的em
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
– body h1
h1 上边的两个选择器都会选择 h1 元素，如果两个选择器设置的样式无关，那就不会产生冲突。但是如果两个选择器设置的是同一个样式，这样 h1 到底要应用那个样式呢？CSS中会默认使用权重较大的样式，权重又是如何计算的呢？
不同的选择器有不同的权重值：
– 内联样式：权重是 1000
– id选择器：权重是 100
– 类、属性、伪类选择器：权重是 10
– 元素选择器：权重是 1
– 通配符：权重是 0
计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样式会优先显示。
例：
选择器的权重 我是一个div 我是div中的span
转载地址：http://woyki.baihongyu.com/