什么是 CSS

CSS(Cascading Style Sheets) 是用来为网页添加样式的代码。

CSS 应用方式

外部样式表（推荐）

• 通过 <link> 引入 CSS
  <link rel="stylesheet" href="index.css">
• 通过 @import 引入样式，放入 css 中

<style>
@import url("index.css");
</style>

内部样式表

将 CSS 放在页面的 <style>元素中

<style>
    h1 { background: orange; }
  </style>

内联样式

不推荐，但在某些情况下有用
<p style="background: black; font-size: 10px;"><p>

属性样式

废弃 现在都会将试样写在CSS中
<img src="a.png" width=100 height=200 >

CSS选择器

基础选择器

*通用元素选择器，匹配页面任何元素（很少使用）
#id id选择器，匹配特定id的元素
.class 类选择器，匹配class包含(不是等于)特定类的元素
element 标签选择器

组合选择器

E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素
element#id id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素

属性选择器

E[attr] 匹配所有具有属性为attr的元素（div[id]能选择所有具有id属性的div）
E[attr=value] 匹配所有属性为value的元素（div[type=text]匹配id=text的div）
E[attr~=value] 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
E[attr ^=value] 匹配属性attr的值以value开头的元素
E[attr $=value] 匹配属性attr的值以value结尾的元素
E[attr *=value] 匹配属性attr的值包含value的元素

• 伪类选择器

E:first-child 匹配元素E的第一个子元素
E:last-child 匹配元素E的最后一个子元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
E:hover 匹配鼠标悬停智商的E元素
E:focus 匹配获得焦点的E元素

伪元素选择器

E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

选择器的优先级是怎样的?

优先级从高到低

1. 在属性后面添加!important,会覆盖页面内任何位置定义的元素样式（特定情况下用，几乎很少）
2. 作为style属性写在元素标签上的内联样式（一般不推荐这样写）
3. id选择器（在唯一特定的元素内使用）
4. 类选择器（使用范围很广，经常使用）
5. 伪类选择器（根据需求使用，注意优先级）
6. 属性选择器（使用场景较少）
7. 标签选择器（一般少量代码下使用）
8. 通配符选择器（使用范围极少，不推荐用，会加大浏览器渲染负担）
9. 浏览器自定义（权限较低）

在复杂情况下，我们这样定义

• 行内试样<div style="xxx"><div>==》A
• ID选择器==》B
• 类，属性选择器，伪类选择器==》C
• 标签选择器，伪元素==》D

以A=?；B=?；C=?；D=?
依次比较A,B,C,D所包含的次数，A相同时比较B，B相同比较C，如果同一级别里一个数大于另一个，则数值大的优先度高
<a href="xxx" id="abc" class="bca"></a>
(1)#abc.bcaA=0，B=1，C=1，D=0
(2)a.bcaA=0，B=0，C=1，D=1
CSS中(1)的样式会覆盖(2)的样式

同样的选择器下
后面的样式会覆盖前面的样式

选择器优先级

样式分析

`# header`匹配id为header的元素
`.header`匹配class为header的元素
`.header .logo`匹配class为header的所有后代class为logo的元素
`.header.mobile`匹配class 同时包含header和mobile的元素
`.header p, .header h3`同时匹配class为header下的所有元素p和h3
`#header a:hover`为id值为header中的a元素指定鼠标悬停在其上方的样式
`#header .logo~p`匹配id值为header的后代元素中class为logo元素之后的同级元素p
`#header .logo+p`匹配id值为header的后代元素中class为Logo元素之后的**相邻**同级元素p
`#header .logo p`匹配id值为header的后代元素中class为Logo元素的后代元素p
`#header .logo>p`匹配id值为header的后代元素中class为Logo元素的子元素p
`#header p.logo`匹配id值为header的后代元素p或后代class值为logo的元素
`#header .logo.p`匹配id值为header的后代class值为p的元素或后代class值为logo的元素
`#header input[checked]`在id为header的子元素中寻找checked属性的input元素

案例分析

<style>
 .box:first-child {
  color: red;
}
.box:first-of-type {
  background: blue;
}
.box :first-child {
  font-size: 30px;
}
.box :first-of-type {
  font-weight: bold;
}
 </style>

<style>一共定义了四个CSS式样，分别是

1. box:first-child匹配其父元素的第一个box子元素，也就是box同级元素中的第一个。其第一个子元素就是<div class="box">div.box</div>所以显示颜色为红色
2. .box:first-of-type匹配第一个box元素的同种标签，其中使用box元素的标签有<div>和<p>，取第一个分别是<div class="box">div.box</div>和<p class="box">p.box</p>。两者的背景色定义为蓝色
3. .box :first-child匹配box元素下的所有第一个后代元素，并且把字体大小定义为30px
4. .box :first-of-type匹配box元素下的所有第一个同种标签，把字体设置为加粗