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>