id选择器
- 1，CSS中以 # 定义
- 2，id属性不能以数字开头
- 3，一个id在文档中只能出现一次
- 4，
#para1{ text-align:center; color:red; }
class选择器
1，CSS中以 . 定义
2，class属性不能以数字开头
3，class属性可以在多个对象中出现
4，
所有的类 .center {text-align:center;} 特定的类 p.center {text-align:center;}
通配选择器
- 1，CSS中以 * 定义
- 2，选择文档中所有的HTML元素
- 3，
* { margin: 0px; }
标签选择器
- 1，选择指定的HTML标签
- 2，
p{ color: green; } 标签与类捆绑定义选择器 p.classname1{ color: gray; }
群组选择器
- 1，将匹配的元素合并，中间以逗号隔开
- 2，
p , tr { color: green; }
相邻选择器
1，要改变的元素样式在某两个元素(1和2)之间
2，
h1 + p { font-size: 2000%; } 语法：(1元素+2元素）
包含选择器
1，要改变的元素样式(1)在某个元素(2)内部
2，
li em { color: rebeccapurple; } 语法：（2元素 1元素）
子选择器
-1，父元素所包含的子元素的样式
-2，
div > span{ /* div元素所包含的span子元素的样式 */
font-size: 24px;
}多层选择器
-1，利用选择器嵌套来实现对HTML结构纵深元素的控制
-2，
<body>
<div id="wrap">
<div id="header">
<h2><span>我是头部</span></h2>
<h2>我是第二个头</h2>
</div>
<div id="menu>
<ul>
<li id="home">首页</li>
<li>我的文章</li>
<li id="aboutMe>关于我</li>
</ul></div>
</div>
</body>
CSS
<style>
#wrap #hearder h2 span{
font-size:100px;}
#wrap #menu <ul> #aboutMe {
color: red;}
</style>元素选择器
1，匹配属性名选择器
<div class="class1>问君能有几多愁</div> <div class="class2">恰似一江春水向东流</div> CSS div[class]{/* 该选择器能够匹配div元素中设置了class属性的对象定义样式，无论class属性值时什么 */ font-size: 24px;}2，匹配属性值选择器
<img src="pic1.png" alt="cat"/> <img src="pic2.png" alt="dog"/> CSS img[alt="dog"]{ border: solid 2px;}
伪选择器/伪元素选择器
a:link { /* 正常链接下的样式粉红色， */ color: pink; } a:visited { /* 已访问的链接样式为绿色 */ color: green; } a:hover{ /* 鼠标经过时的样式为绿色 */ color：blue; } a:active{ /* 超链接被激活时的样式为红色 */ color: red; }
