一、渐进增强和优雅降级

**渐进增强：**针对低版本浏览器进行构建页面，保证最基本功能。在针对高版本浏览器进行效果、互动等改进和追加功能，达到更好的体验。
**优雅降级：**一开始就构建完整的功能，然后针对低版本进行兼容。

二、层级选择器

+当前元素的后面第一个兄弟
.child+li{
    background:yellow
}

~ 当前元素的后面所有的亲兄弟
.child~li{
    background:yellow;
}
1
2
3
4
5
6
7
8
9

三、属性选择器

#div标签中具有class属性的元素
div[class]{
}


#div标签中，class属性为box的元素
div.box1{
    
}
div[class=box1]{
    
}  #完全匹配，该div标签的class属性只有box1
[type=test]{
    
}  #完全匹配

div[class～=box1]{
    
}  #包含匹配，div标签的class属性包含box1即可，也可以包含其他


#模糊匹配
class^=b  以字符b开头
class$=b  以字符b结尾
class*=b  包含b字符 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

四、伪类选择器

1、结构伪类选择器

例子：

ul li:nth-child(2n){
    
} #匹配所有子节点li中第偶数位的节点

div p:only-child{
    
} #div只有一个孩子，为p

:root,body{
    
} #root是指html
1
2
3
4
5
6
7
8
9
10
11

2、目标伪类选择器

• 用法：

E:target 选择匹配E的所有元素，且匹配元素被相关url指向
1

目标伪类选择器是结合锚点用的（就这一个用法）

锚点通过a标签设置href为“#xxx”的url，来跳转到标签x，id=“xxx”的块中，实现被跳转的标签元素有URL指向。当点击a链接时会跳转到x标签页面上（url指向该标签处）并触发x:target属性。

• 手风琴案例：

点哪个哪个展开

3、UI元素状态伪类选择器

checked选中状态是指radio单选框、checkbox多选框这类元素被勾选后的状态
selection是指在页面鼠标按住选中一行内容后的状态
注意E::section有两个冒号

4、否定伪类选择器

E:not(s) 匹配所有不匹配简单选择符s的元素E

例如：

否定伪类选择器：
E:not(:first-child){
}
除了第一个孩子都选中
1
2
3
4

5、动态伪类选择器

E:link 匹配元素E被定义了超链接，但还未被访问过，初始状态
E:visited 匹配元素E被定义了超链接，已经被访问过后的状态
E:hover 用户鼠标停留在元素E上的状态
E:active 匹配元素E被点击激活了，常用语锚点和按钮