1.标签选择器：直接用元素的标签来进行选择
span { // 直接选择span标签
size:16px;
}
1
2
3
1
2
3
2.ID选择器：通过设置id名字，进行精确的选择，用#来定义
# div1 { //通过id名字来进行选择
color:red;
}
<div>1</div>
1
2
3
4
1
2
3
4
3.类选择器:通过类名来进行选择，选择范围比id选择器大，用’.来定义
.div1 { //所有类名为div1的都被选择了
color:red;
}
<div>1</div>
<div>1</div>
<div>1</div>
1
2
3
4
5
6
1
2
3
4
5
6
4.通配符选择器：范围更大，作用于所有标签，用*来定义
不建议使用，对页面加载负担大
高级选择器
1.后代选择器：定义用空格隔开
div span { //选择的是div标签下的span标签，当然后代顾名思义可以不止隔一代，可以隔多代进行选择
color：red；
}
<div><span>1</span></div>
1
2
3
4
1
2
3
4
2.交集选择器：与后代选择器定义的不同是，没有空格隔开，两个元素紧挨着
span#a1 { //选择的是两个条件1.既是span标签的 2.id名是a1的元素，两个条件缺一不可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
3.并集选择器：定义用逗号隔开
span，#a1 { //选择的是1.是span标签的 2.id名是a1的元素，两个条件满足一个即可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
4.伪类选择器：
1.静态伪类：点击连接之前（link），点击连接之后(visited)这样的
2.动态伪类：鼠标移入（hover），点击之后（focus）
@ 图片点击变成另一张图片是怎么做到的？
你现在的效果应该是鼠标移上去之后会变成另外一张图片。 使用的是CSS的伪类， a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 提示：伪类名称对大小写不敏感。
@ css中选择器是什么意思？
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
每一条css样式定义由两部分组成，形式如下：[code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
@ 使用样式表有什么好处？
使用样式表有以下优点：
1.内容与表现分离
写一个网页就好比建房子，房子的结构通过砖块、钢筋、水泥搭建，后期通过瓷砖、地板等的装饰，才能让房子更加漂亮。
网页通过HTML搭建整体结构，通过CSS修饰美化网页。为了使得在搭建的过程中不受到美化网页的影响，而是专注在结构上。并且在后期的维护上也更加方便。
2.网页的表现统一，容易修改
分开之后，结构和样式在不同的文件，互不影响，结构清晰，可读性强，后期如果修改维护便于定位查找。
3.丰富的样式，使得页面布局更加灵活
首先样式表中提供了强大的而且非常全面灵活的选择器，可以供大家选取到网页中的任何一个元素
从大的方面选择器可以分为四大类：
1.基本选择器
2.层次选择器
3.结构伪类选择器
4.属性选择器
如下图偶只是截取了属性选择器中几种：
其次样式表不仅提供了文本效果、背景和边框还有2D/3D 转换、动画、多列布局、用户界面等。
4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”
换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。
另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。
而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度
基于以上几点，使用样式表是必须的！！
