1.css基础选择器
1.1.标签选择器
就是用标签名来当做选择器。
1） 所有标签都能够当做选择器，比如body、h1、dl、ul、span等等
2） 不管这个标签藏的多深，都能够被选择上。
3） 选择的是所有的，而不是某一个。所以是共性，而不是特性。
比如网易，希望页面上所有的超级链接都没有下划线：
a{
/*去掉下划线：*/
text-decoration: none;
}
1.2. id选择器
1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线。大小写严格区别，也就是说mm和MM是两个不同的id。
2）同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。也就是说，如果有一个p的id叫做haha，这个页面内，其他所有的元素的id都不能叫做haha。
#lj1{
font-size: 60px;
font-weight: bold;
color:black;
}
1.3类选择器
.就是类的符号。类的英语叫做class。所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：
.teshu{
color: red;
}
<h3>我是一个h3啊</h3>
<h3 class="teshu">我是一个h3啊</h3>
<h3>我是一个h3啊</h3>
<p>我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
同一个标签，可能同时属于多个类，用空格隔开,这样，这个h3就同时属于teshu类，也同时属于zhongyao类,所以要总结两条：
a. class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
b.同一个标签可以同时携带多个类。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.lv{
color:green;
}
.da{
font-size: 60px;
}
.xian{
text-decoration: underline;
}
</style>
</head>
<body>
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>
</body>
</html>
image.png
c.尽可能的用class，除非极特殊的情况可以用id,id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。
2.CSS高级选择器
2.1后代选择器
空格可以多次出现，.div1里面的后代.li2里面的p，后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器，代选择器，描述的是祖先结构。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.div1 .li2 p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
<li class="li2">
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
<li>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
</ul>
</div>
<div>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</div>
</body>
</html>
2.2交集选择器
选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签,交集选择器没有空格，所以div.red和div .red不是同一个意思哟，交集选择器也可以连续交h3.special.zhongyao{color:red;3 }（一般不要这么写）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
h3.special{
color:red;
}
</style>
</head>
<body>
<h3>我是标题</h3>
<h3 class="special">我是标题</h3>
<h3 class="special">我是标题</h3>
<p class="special">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<a href="" class="xixi">aaa</a>
</body>
</html>
image.png
2.3并集选择器（分组选择器）
用逗号就表示并集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
h3,li{
color:red;
}
</style>
</head>
<body>
<h3>我是一个标题</h3>
<p>是一个段落</p>
<ul>
<li>我是一个列表</li>
</ul>
</body>
</html>
image.png
2.4.通配符*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<p>段落</p>
<h3>标题</h3>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</body>
</html>
image.png
3.CSS的继承性和层叠性
3.1.继承性
关于文字样式的，都能够继承，比如color、 text-开头的、line-开头的、font-开头的。； 所有关于盒子的、定位的、布局的属性都不能继承，继承性是从自己开始，直到最小的元素,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
color:blue;
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
image.png
3.2.层叠性
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！CSS像艺术家一样优雅，像工程师一样严谨
a.当选择器，选择上了某个元素的时候，那么要这么统计权重：id的数量，类的数量，标签的数量
image.png
image.png
b.如果权重一样，以后出现的为准
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
#box2 div .pp{
color:red;
}
#box1 .hezi2 p{
color:blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p class="pp">猜猜我是什么颜色？</p>
</div>
</div>
</div>
</body>
</html>
image.png
c.如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
image.png
image.png
d.如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。
image.png
image.png
