1.基础选择器

（1）标签名选择器
书写方式：标签名{声明；}
例：

  1. p{color:red;}
  2. h1{font-size:16px;}

（2）类选择器
.class名{声明；}
例：

<head>
    <style>
        .cs{
            font-size: 14px;
            color: pink;
        }
    </style>
</head>

<body>
    <p class="cs">这是一段测试文字</p>
</body>
</html>

（3）id选择器
#id名{声明；}
例：

<head>
<style>
        #cs{
            font-size: 14px;
            color: pink;
        }
    </style>
</head>
<body>
    <p id="cs">这是一段测试文字</p>
</body>
</html>

2.选择器组合用法

（1）后代选择器（父选择器的所有后代）
父选择器 子选择器{声明;}
例：

<ul>
      <li>一级标题</li>
          <li>
           <ol>
              <li>二级标题</li>
              <li>二级标题</li>
              <li>二级标题</li>
           </ol>
          </li>
      <li>一级标题</li>
      <li>一级标题</li>
</ul>

<!-- 在ul里的所有li标签都执行 -->

ul li{
    border: 1px solid rgb(48, 8, 226);
     color:rgb(252, 8, 8);
}

演示图
后代选择器.jpg
（2）子代选择器 （父选择器只管理自己的儿子）
父选择器>子选择器{声明;}
例：

<ul>
      <li>一级标题</li>
          <li>
           <ol>
              <li>二级标题</li>
              <li>二级标题</li>
              <li>二级标题</li>
           </ol>
          </li>
      <li>一级标题</li>
      <li>一级标题</li>
</ul>

ul>li{
    border: 1px solid rgb(48, 8, 226);
     color:rgb(252, 8, 8);
}

演示图
子代选择器.jpg
（3）分组选择器
选择器1,选择器2,选择器n{声明;}
例：

<body>
    <h1>测试文字1</h1>
  <span>测试文字2</span>
  <p>测试文字3</p>
</body>

h1,span,p{
    color: rgb(247, 2, 2);
}

演示图
分组选择器.jpg
（4）关联选择器
标签选择器.class类选择器{声明;}
例：

<body>
     <p>测试文字1</p>
    <p class="W">测试文字2</p>
    <span class="W">测试文字3</span>
</body>

p{
    color: rgb(247, 1, 247);
}
.W{
    color: blue;
}
span.W{
    color: red;
}

演示图
关联选择器.jpg
（5）属性选择器
标签名[属性名=属性值]{声明;}
扩展：
标签名[属性名^= a]{声明;} 属性以a开始
标签名[属性名$= a]{声明;} 属性以a结束
标签名[属性名*= a]{声明;} 含有a的属性
例：

 <form action="">
        <input type="text" name="userName" id=""><br>
        <input type="password" name="psw" id=""><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    </form>

[type=submit]{
    background-color: rgb(247, 1, 214);
}

[name^=p]{
    color: rgb(247, 4, 4);
}

input[name$=e]{
    color: blue;
}

[type*=es]{
    background-color: red;
}

演示图
属性选择器.jpg
（6）同辈兄弟选择器
选择器1~兄弟选择器2{声明;}
例：

<body>
 <p>一级兄弟</p>
    <h1>一级兄弟</h1>
    <p>一级兄弟</p>
    <div>
      <p>二级兄弟</p>
    </div>
 <p>一级兄弟</p>
</body>

h1~p{
    color: rgb(8, 23, 236);
}

演示图
同辈兄弟选择器.jpg
（7）紧挨着兄弟选择器
选择器1+兄弟选择器2{声明;}
例：

<body>
 <p>一级兄弟</p>
    <h1>一级兄弟</h1>
    <p>一级兄弟</p>
    <div>
      <p>二级兄弟</p>
    </div>
 <p>一级兄弟</p>
</body>

h1+p{
    color: blue;
}

演示图
紧挨着兄弟选择器.jpg
（8）伪类选择器（第几个）标签中都相同的标签（多用于li中）
第一个 标签名:first-child{声明}
第几个 标签名:nth-child(几){声明;}
最后一个 标签名:last-child{声明}
例：

<body>
 <ul>
      <li>测试1</li>
      <li>测试2</li>
      <li>测试3</li>
      <li>测试4</li>
 </ul>
</body>

li:first-child{
    color: red;
}
li:last-child{
    color: rgb(3, 19, 241);
}
li:nth-child(3){
    background-color: rgb(86, 248, 11);
}
li:nth-child(2){
    font-size: 20px;
}

演示图
伪类选择器之li.jpg
（9）伪类选择器（第几个） 标签中有不同的标签（通用）
第一个 标签名:first-of-type{声明}
第几个 标签名:nth-of-type(几){声明;}
最后一个 标签名:last-of-type{声明}
例：

<div>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
    </div>

p:first-of-type{
    background-color: red;
}
p:last-of-type{
    font-family: '楷体';
    font-size: 18px;
}
p:nth-of-type(3){
    font-weight:bold;
    color: blue;
}

演示图
伪类选择器通用.jpg
（10）伪类选择器（a）
注意：四个特征顺序不能改变。如直接设置a，代表的是同时设置四个状态
新连接样式 a:link{声明;}
旧链接样式 a:visited{声明;}
悬停样式 a:hover{声明;}
点击样式 a:active{声明;}
四种样式同时设置 a{声明;}
例：

<a href="#2">测试链接</a>

a:link{color: red;}         
a:visited{color: green;}     
a:hover{color: pink;}            
a:active{color:blueviolet;}

演示图
新链接样式（红色）
image.png
旧链接样式（绿色）
image.png
鼠标悬停样式（粉色）
image.png
鼠标点击样式（紫色）
image.png