就是制定css要作用的标签，那个标签的名称就是选择器，意为选择哪个容器

（1）class选择器，使用的是标签中的属性。在一个网页中可以定义多个style

指定哪个类用”.”

<style>

   div{
       background-color:#F00;
       color:#FF9;
   }
   //制定哪个选择器，哪个类用这种格式
  div.haha{
       background-color:#3C9;
       color:#FF9;   
   }
   span.haha{
       background-color:#3C9;
       color:#FF9;   
   }
   </style>
    <!--若希望所有的选择器中带hehe的都是相同效果，可以用.hehe{},这样就能有效提高代码复用性-->
    <style>
    .hehe{
       background-color:#36F;
       color:#F69;
   }
   <!--.enen:是预定义样式，可以作用在任何选择器的类名为enen中，可以实现动态加载
   <!-- 比如开始的网页是一种显示，当点某个按钮或其他操作时，该网页会出现新的效果
   -->
</style>
<p class="hehe">这是一个段落2</p>


（2）id选择器就是标签中的id属性

<style type="text/css">

 div#qq{
     background-color:#F39;
     color: #FF3;
 }
 span#qq{
     background-color:#F39;
     color: #FF3;
 }
 </style>
 <style type="text/css">
 #pp{

     background-color:#0FC;
     color: #F00;
 }

 </style>


每个标签都定义了class属性和id属性，用于对标签进行标识，方便对标签进行操作。

通常id的取值在页面上是唯一的，因为该属性除了css使用，还可以被jsp使用。id通常都是为了标识页面中的一些特定区域使用的

优先级：标签选择器<类选择器

<!--若只写b则将页面的所有b标签全都改成了这种样式-->

<!--若只是对span中的b标签进行格式修改，用span+空格+b -->
span b{
       background-color:#F00;
       color:#FF9  
   }
<span >span<b>区域</b>1</span>


四、组合选择器

对多个选择器进行相同样式设定，选择器间用“，”隔开

//对.haha选择器和div中的b选择器进行样式修改
<style>
 .haha,div b{
     background-color:#0C0;
     color:#F00;
 }
</style>


五、伪元素选择器

格式：标签名：伪元素

（1）超链接

a:link 超链接未点击状态

a:hover 光标移动到超链接上的状态

a:active 点击超链接时的状态

a:visted 被访问后的状态

顺序：L-V-H-A

（超链接一般默认都有样式，例如下划线、点击后文字颜色改变，这些都可以自定义）

<style>
/*
未访问
*/
a:link{
    color:#906;
    text-decoration:none;
    font-size:18px;
}
 /*
 鼠标悬停
 */
 a:hover{
    color:#F00;
     font-size:24px;
     }
/*
点击效果
*/

 a:active{
     color:#0F0;
     font-size:36px;
 }
 /*
 访问后的效果
 */
 a:visted{
     color:#30F;
     text-decoration:line-through;
 }

</style>

</head>

<body>

<a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>

</body>


（2）

p:first-line 段落的第一行文本

p:first-letter段落中的第一个字母

:focus具有焦点的元素

<style>
p:first-letter{
    font-size:36px;
    color:#F00;

}
p:first-line{
    font-size:18px;
    color:#0F0;
}
input:focus{
    background-color:#F00;
}
</style>