1.基础选择器
选择器：指的是我们选择需要添加样式的标签元素的模式
1.标签选择器
通过标签名直接选择相应的标签。标签是什么就用什么选择。
标签选择器会选中页面中所有对应的标签，不论怎么嵌套，都会被选择。
-
实际使用中，不会用标签选择器来更改某一属性，因为会影响其他，常用来设置初始默认样式，或者清除默认系统样式。
<style type="text/css"> h2 { color: red; } p { color: blue; } /*清除默认系统样式*/ h2,p,div { margin: 0; padding: 0; } </style>
缺点：会选中所有选中类型的标签，不能单独或部分设置
2.id选择器
通过标签的id属性值来选择相应的标签，由于id的值是唯一的，所以id选择器选中的标签也是唯一的。以#号开头，加上id名。
id名严格区分大小写，以字母开头，严禁设置相同的id名，即使是不同的标签
-
id其实常用来给js添加行为，而不是添加样式
<h2 id="one">标题</h2>#one { color: orange; font-size: 40px; }
缺点：只能选中一个标签，具有相同样式的标签，得分别设置id，多次书写
3.类选择器
通过标签的class属性来选择标签。
-
以.（点）开头，加上class名，中间不能有空格，class的值可以不惟一
<h2 class="two">标题</h2>.two { background-color: rgb(200,200,200); } -
由于class的值可以有多个，所以我们可以设置一些通用的css属性，当某一标签需要使用时，直接添加这个类名即可。
<h2 class="font20 text-color">标题</h2>.font20 { font-size: 20px; } .text-color { color: black; }
4.通配符*
-
可以选中包括body在内的所有标签。现在已经不常用了，效率太低。可以用作简单案例里清空默认样式。
* { border: 1px solid purple; }
2.高级选择器
基础选择器并不能满足所有需求，在基础选择器的基础上进行了一些延伸，出现了高级选择器。有三种：后代选择器， 交集选择器，并集选择器。
1.后代选择器
- 又叫包含选择器，通过标签之间的嵌套，层级关系，限定大体范围，然后在范围内具体查找元素。
- 前后为父子级关系，但是不一定是相邻的，可以是多级的。
<div>
<ul class="ul1">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul class="ul2">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</div>
例如上边，想要第一个列表的文字为红色，当然可以给每个第一个列表中所有li设置class，但是，我们有更好的方式，那就是通过后代选择器，先选择第一列，然后给li标签设置颜色即可。
.ul1 li {
color: red;
}
.ul2 li {
color: blue;
}
2.交集选择器
- 两种以上的选择器同时作用在一个标签上。选择器相连，中间没有空格之类的其他符号。
- 可以是基础与高级的交集，也可以是基础的交集。
<div>
<ul class="ul1">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul class="ul2">
<li class="li1">
列表项
<p>我是p1</p>
</li>
<li>
列表项
<p class="p2">我是p2</p>
</li>
<li class="li3 hhh">
列表项
<p>我是p3</p>
</li>
</ul>
</div>
如上图：
1.设置第二列第一项的li标签为粉色。
标签选择器与类选择器的交集
li.li1 {
color: pink;
}
2.设置第二列第二项的p2标签为橘色。
后代选择器与类选择器的交集
.ul2 li p.p2 {
color: orange;
}
3.设置第二列第三项的li标签为灰色
后代选择器与类选择器的交集，其中类名有多个，属于连续交集
.ul2 li.li3.hhh {
color: gray;
}
IE6不支持连续交集
3.并集选择器
具有共同样式的标签，通过并集选择器将这些表器写在一起，统一设置css样式。
以逗号隔开。
-
主要用于清空样式
li,p { font-weight: bold; }
