CSS基础与选择器

一、CSS加载方式

---

外部样式表（推荐）

1. 通过在html中引入CSS：

  
  
  


  
Hello CSS!

2. 通过@import引入样式，放入CSS中，不要忘记分号“;”：

内部样式表

将CSS放在页面的

Hello CSS!

内联样式（不推荐）

某些情况下很有用：

CSS 很 6

属性样式（废弃）

二、@charset的作用

---

@charset是用来声明CSS文件的编码类型，如@charset "utf-8"，当文件保存为utf-8编码时，打开将正常显示，否则会出现乱码。

三、@import的作用

---

@import是用来在CSS文件中使用，来导入样式表。
优点是把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可。
缺点是：

1. 兼容性的差异。由于@import是CSS2.1提议的因而老的阅读器不支持，@import只有在IE5以上的才力辨认，而link标签无此题目。
2. 应用dom控制样式时的差异。当应用javascript控制dom去转变样式的时间，只能应用link标签，由于@import不是dom可以控制的。
3. 老祖宗的差异。link属于XHTML标签，而@import完备是CSS提供的一种格式。

四、id选择器和class选择器的应用场景

---

id选择器

id选择器用来为标有特定id的html元素指定特定的样式，html元素以id属性来设置id选择器，CSS中id选择器以#来定义。
通常要保证id是唯一的(便于js中的getElementById的正常使用)，所以id选择器一般在一个页面中只能被单个的html元素引用。并且不能为一个html元素指定多个id选择器。

class选择器

用于描述一组元素的样式，html元素通过class属性来设置class选择器，可以用于多个html元素，一个元素也可以有多个class选择器。以.来定义。
class选择器可以被多个html元素使用，因为元素的class属性没有必要保证唯一性。另外一个html元素也可以有多个class属性值，值之间用,隔开。

五、CSS选择器的种类

---

1. 元素选择器 Element Seletors

p {
  color: red;
}
div {
  color: blue;
}

2. ID选择器 ID Selectors

123

#123{
color:red;
}

3. 类选择器 Class Selectors

一个 CSS 类可以应用到多个不同的元素，一个元素也可以应用多个不同的 CSS 类:

  
起床
  
刷牙
  
洗脸

.first {
  font-weight: bold;
}

.done {
  text-decoration: line-through;
}

4. 通用选择器 Universal Selector

* {
  box-sizing: border-box;
}

.flex-container * {
  flex-basis: 100%;
}

5. 属性选择器 Attribute Selectors

6. 伪类 Pseudo-classes

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }

• :link：选择未被访问的链接
• :visited：选择已被访问的链接
• :hover：选择鼠标悬浮在上方的元素
• :active：选择被激活的元素
• :first-child：选择元素的第一个子元素
• :last-child：选择元素的最后一个子元素
• :not(p)：选择不含p元素的元素
• :not(.warning)：选择不含warning类的元素

7. 伪元素 Pseudo-elements

• ::after：应用于整块文字的尾端
• ::before：应用于整块文字的开头
• ::selection：应用于文档中被用户高亮的部分（比如鼠标选中的部分）。
• ::backdrop：实验特性
• ::first-letter：选中一整块文字第一行的第一个字母，当文字所处的行之前没有其他内容（如图片和内联的表格）。
• ::first-line：将样式只应用于一个块状元素的首行。
• ::-webkit-input-placeholder：应用于input元素的placeholder

8. 组合选择器 Combinators

• A,B：选中匹配 A 或/和 B 的元素
• A B：选中匹配 B 且为匹配 A 的元素的后代元素。
• A>B：选中匹配 B 且为匹配 A 的元素的直接子元素。
• A+B：选中匹配 B 且为匹配 A 的元素的下一相邻元素。
• A~B：选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素。

9.多个选择器 Multiple Selectors

练习：选择器含义

- #header{}：选择ID为header的元素
- .header{}：选择匹配header的元素
- .header .logo{}：选择匹配header的元素中，匹配logo的后代元素
- .header.mobile{}：选择匹配header与mobile的元素
- .header p, .header h3{}：选择匹配header，类型为p或h3的元素
- #header a:hover{}：选择id为header元素的后代中，类型为a，状态为hover的元素
- #header .logo~p{}：匹配id为header元素后代中，匹配logo的下N个类型为p的相邻元素
- #header .logo+p{}：匹配id为header元素后代中，匹配logo的下一个类型为p且相邻的元素
- #header .logo p{}：匹配id为header的元素后代-->匹配logo的元素后代-->类型为p的元素
- #header .logo>p{}：匹配id为header的元素后代-->匹配logo的元素后代-->类型为p的直接子元素
- #header p.logo{}：选择匹配id为header的元素后代中，类型为p且匹配logo的元素
- #header .logo.p{}：选择匹配id为header的元素后代中，匹配logo与p的元素
- #header input[checked]{}：选择匹配id为header的元素后代中，类型为input且状态为checked的元素

六、选择器优先级的计算

---

优先级分类

CSS的优先级通常由高到低分为6级：

1. 第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。
2. 第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
3. 第三优先级：由一个或多个id选择器来定义。例如#id{margin:0;}会覆盖.classname{margin:3pxl}。
4. 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义如.classname{margin:3px}会覆盖div{margin:6px;}。
5. 第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}。
6. 第六优先级：通配选择器，如*{marigin:6px;}。

优先规则

在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。
我们可以把各类选择器按如下定义分为四个等级，每个等级分配比重不同的权值，计算优先级时将每级的权值相加，得到选择器的权值。

• 第一级：内联样式，权值为1000，如style=""
• 第二级：id选择器，权值为100，如#header
• 第三级：类，伪类和属性选择器，权值为10，如.header
• 第四级：标签选择器和伪元素选择器，权值为1，如div p
  注意：通用选择器*，子选择器>，和相邻同胞选择+的权值为0。