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;
        }
  

高级选择器效果