什么是CSS？
CSS(Cascading Style Sheets)是用来为网页添加央视的代码。
外部样式表（推荐）
- 通过<link>引入css
<html>
<head>
<meta chaarset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
- 通过@import引入样式，放入css中
@import 'style2.css';
@import url("style2.css");
h1 {
color: red;
}
- 内部样式表
不要写在html外面，一般放在head里面
CSS选择器
- 基础选择器
- 组合选择器
| 选择器 |
含义 |
| 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:first-child |
匹配元素E的第一个子元素 |
| E:link |
匹配所有未被点击的链接 |
| E:visited |
匹配所有已被点击的链接 |
| E:active |
匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover |
匹配鼠标悬停其上的E元素 |
| E:focus |
匹配获得当前焦点的E元素 |
| E:lang(c) |
匹配lang属性等于c的E元素 |
| E:enabled |
匹配表单中可用的元素 |
| E:disabled |
匹配表单中禁用的元素 |
| E:checked |
匹配表单中被选中的radio或checkbox元素 |
| E::selection |
匹配用户当前选中的元素 |
- 伪元素选择器
| 选择器 |
含义 |
| E::first-line |
匹配E元素内容的第一行 |
| E::first-letter |
匹配E元素内容的第一个字母 |
| E::before |
在E元素之前插入生成的内容 |
| E::after |
在E元素之后插入生成的内容 |
| 选择器 |
🌰 |
| 元素选择器 Element Selector |
p 选中所有段落 <p> |
| ID 选择器 ID Selector |
#notice 选中 <div id="notice"> 或 <p id="notice"> |
| 类选择器 Class Selector |
.success 选中 <div class="success"> 和 <a class="success"> |
| 属性选择器 Attribute Selector |
[hidden] 选中 <div hidden> 和 <img hidden> |
| 伪类选择器 Pseudo class selector |
a:hover 选中 鼠标悬停所在的 <a> |
选择器的优先级：
- 在属性后面使用！important会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景如何计算？
- 行内样式 ==> a
- id选择器 ==> b
- 类，属性选择器和伪类选择器 ==> c
- 标签选择器和伪元素选择器 ==> d
看样式中各类选择器的个数，a，b，c，d，如果a大其权重高，a相等看b，依次比较其大小，谁大谁权重高
