作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。
给链接定义样式：
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。
其他：
否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法： :not(选择器){}
比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。
属性选择器可以挑选带有特殊属性的标签。
语法：
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]
作用：选中指定父元素的指定子元素
语法：父元素 >子元素
比如body >h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器
其他子元素选择器
除了根据祖先父子关系，还可以根据兄弟关系查找元素。
语法：
兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。
不同的选择器有不同的权重值：
属性:通过属性的复杂叠加才能做出漂亮的网页。选择器:通过选择器找到对应的标签设置样式
标签选择器:就是用标签名来当选择器
1>所有的标签都能做选择器，例如:div、p、 ul、 li、 a、 span、body等等
2>不管这个标签藏的多深，都能够被选择上。
3>选择的整个界面所有的标签，而不是某个，是共性而不是特性
比如说火狐浏览器中的 li 里面所有的 a 标签去掉下划线
# 表示选择 id 选择器
1>任何标签都可以有 id ,命名方式要以字母开头，区分大小写
2>同一页面内 id 不可重复，即使是不一样的标签，也不允许相同的 id
. 表示类选择器 与 id 选择器类似，但是类选择器可以重复，比如说很多标签都有 aa 这个类
css里面用 . 来表示类
同一标签，可能同时属于多个类，用空格隔开.说明 div 同时属于 bb 和 cc 类
<div class = @"bb cc">我是bbcc</div>
错误方式:
<div class = @"bb" class="cc">我是bbcc</div>
思路：提供公共类，再根据相应的类名，去设置相应的样式。
在根据每个标签，去选取自己想要的类。
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>
