CSS选择器

类选择器

语法

.类选择器名称{CSS样式代码;}

类选择器名称可以任意起名

<style type="text/css">
.stress{
   color:red;
}
</style>
······
<p>
   <span class="stress">胆小如鼠</span><!-- 将“胆小如鼠”颜色设为红色-->
</p>

可以使用类选择器词列表方法为一个元素同时设置多个样式

<style type="text/css">
.stress{
   color:red;
}
.bigsize{
   font-size:25px;
}
</style>
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

ID选择器

语法

#类选择器名称{CSS样式代码;}

ID选择器在同一HTML文档中有且仅能使用一次

<style type="text/css">
#setRed{
   color:red;
}
</style>
······
<p>
   <span id="setRed">胆小如鼠</span><!-- 将“胆小如鼠”颜色设为红色-->
</p>

子选择器

语法

>作用于元素的第一代后代

<style type="text/css">
.first>span{
   border:1pxsolidred;
}
</style>
······
<p>
   <span>胆小如鼠</span><!-- 将“胆小如鼠”添加边框样式（粗细为1px， 颜色为红色的实线）-->
</p>

包含（后代）选择器

语法

空格作用于元素的所有后代

<style type="text/css">
.food>li{
   border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
······
<ul class="food">
   <li>水果
       <ul>
      <li>香蕉</li>
           <li>苹果</li>
           <li>梨</li>
       </ul>
   </li>
</ul>

通用选择器

语法

<style type="text/css">
*{
   border:1px solid red;
}
</style>
······
<p class="*">
  pigpigBiu个<span class="*">大傻猪</span><!-- 将“大傻猪”添加边框样式（粗细为1px， 颜色为红色的实线）-->
</p>

伪类选择符

给html不存在的标签（标签的某种状态）设置样式

语法

<style type="text/css">
a:hover{/*当鼠标滑过字体颜色变为红色特效*/
   color:red;
   font-size:20px;
}
</style>
······
<p class="*">
  pigpigBiu<a>大傻猪</a><!-- 将“大傻猪”添加边框样式-->
</p>

分组选择符

为html中多个标签元素设置同一个样式

<style type="text/css">
   h1,span{
       color:red;
  }
</style>