一、选择器
1 元素选择器
格式： 元素名{属性：值;}
eg: em{color:blue;}
2.类选择器
格式： . 类名{属性：值;}
eg: .wrap {
100px;
height: 100px;
background-color: #0000FF;
}
<div class="wrap"></div>
3.ID选择器
格式： #id名{属性：值;}
eg: #txt {
100px;
height: 100px;
background-color: #0000FF;
}
<div id="txt">测试数据</div>
4.通配符选择器（用于选择所有的元素）
eg: *{
color:blue;
}
初始化 * {
margin: 0;
padding: 0;
}
5.伪类选择器（任何元素都可以用）
<a class="test1" target="_blank" href="http://www.baidu.com">跳转</a>
未被访问过的链接：
.test1:link {
color: red;
}
/*被访问过的链接*/
.test1:visited {
color: green;
}
/*鼠标移入的链接*/
.test1:hover {
font-size: 20px;
}
/*鼠标点击时不抬起的状态*/
.test1:active {
color: red;
}
6.伪元素选择器
所有浏览器支持的有两种：
一个元素的第一字母： p:first-letter {属性：值；}
一个元素的第一行： p:first-line {属性：值；}
7.复合选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* 复合选择器*/
.text1{color:red;
}
div.text1{color:blue
}
</style>
<div class="test1">测试数据1</div>
<div class="test2">测试数据2</div>
<p class="test1">测试数据3</p>
<p class="test2">测试数据4</p>
<body>
<div class="test1">测试数据1</div>
<div class="test2">测试数据2</div>
<p class="test1">测试数据3</p>
<p class="test2">测试数据4</p>
</body>
</html>
8.交集选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*交集选择器*/
div.test1 {
color: red;
}
p.test1 {
color: #3ca354;
}
</style>
</head>
<body>
<div class="test1">测试数据1</div>
<div class="test2">测试数据2</div>
<p class="test1">测试数据3</p>
<p class="test2">测试数据4</p>
</body>
</html>
9.并集选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* 并集选择器 */
div,.test2,#test3,span {
font-size: 16px;
font-weight: 400;
color: red;
}
</style>
</head>
<body>
<div>测试数据1</div>
<p class="test2">测试数据2</p>
<h1 id="test3">测试数据3</h1>
<span>测试数据4</span>
</body>
</html>
10.后代选择器
选择所有的（用空格）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrap{ border:1px solid red;
font-size: 16px;
font-weight: 400;
}
.wrap div{ 100px;
height:50px
background-color: #0000FF;
}
</style>
</head>
<body>
<div class="wrap">
<div>
<div>测试数据</div>
</div>
</div>
</body>
</html>
选择直接后代（就用“>”）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrap > .inner1 > div > span {
color: red;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<span>测试数据1</span>
<div>
<span>测试数据2</span>
<div>
<span>测试数据3</span>
</div>
</div>
<div class="inner1">
<span>测试数据2</span>
<div>
<span>测试数据3</span>
</div>
</div>
</div>
</body>
</html>
二、优先级
从小到大选择器：元素选择器 类别 ID
权值：内联1000，ID 100，类10，元素1。
破坏结构，不计算权值！important