一、简单的选择器
1）标签选择器
与网页元素同名，用的最多，也简单，即直接作用于与该选择器名字相同的标签
2） 类选择器
能够为网页对象定义不同的样式类，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同样式
3）类选择器和标签结合在一起==>指定类选择器
指定该类用于特定的标签范围内
4）ID选择器（ID唯一）
这个就不举例讲解了，类比类选择器，把"."换成"# "即可
5）通配选择器
如果所有元素都需要定义相同的样式，推荐使用通配选择器
二、复合选择器
1）子选择器
2）相邻选择器（二者有相同父元素）
**利用相邻的兄弟元素来控制，即相邻选择器就是指定一个元素相邻的下一个元素的样式。相邻的选择器使用+表示
3）包含选择器（后代选择器）
第一对象一定要内包含第二对象
4）选择器嵌套
5）属性选择器
属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。
1.匹配属性名选择器
2.扩展
3.匹配属性值选择器
4.模糊匹配属性值选择器
类似正则表达式
6）伪选择器和伪元素选择器
标签之间可以通过逗号隔开来设定多个标签的CSS样式
CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下：1.子选择器
复制代码
代码如下:
<style type="text/css">
#pic>img{ // 使用 >号，让选择器只选择直接的子类，width:200px
height:200px
}
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>
2.相邻选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
3.包含选择器
复制代码
代码如下:
#header p{font-size:14px}
#main p {font-size:12}
定义<div id = "header">包含框里的段落字体大小为14像素
定义<div id = "main">包含框里的段落字体大小为12像素.
4.多层选择器嵌套
复制代码
代码如下:
#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}
5.属性选择器
（1）匹配属性名选择器
div[class] {font-size:24px}
使该选择器能够匹配div中设置了class属性的对象定义格式
（2)匹配属性值选择器
img[alt="图像"][title="图像"] {border：solid 2px red}：
给<img src="images/pic1.jpg" alt="图像" title=“图像”>定义样式
(3)模糊匹配属性值选择器
6.伪选择器和伪元素选择器
复制代码
代码如下:
<style type ="text/css">
a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/
</style>
最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是 filter: blur(2px) ，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是 backdrop-filter: blur(3px) ，完美的实现了设计稿的要求。
下面就来看看这两个属性的区别，遇到的问题以及解决方案。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加 filter: blur(2px) ，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。
这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter
