选择器:浏览器通过选择器为满足条件的HTML元素添加CSS样式。
主要类型
id选择器:浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式,id标签属性值不可以数字开头,且在整个页面唯一。
<span id="id">PERFECT</span>
<style>
#id{
font-family: "华文彩云";
font-size: 20px;
}
</style>
类选择器:浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式,class标签属性的属性值不可以数字开头且可以有多个,每个值之间用空格间隔,可以不唯一。
<span class="class">PERGECT</span>
<style>
.class{
font-family: "华文彩云";
font-size: 20px;
}
</style>
标签选择器:浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式。
<p> PERFECT </p>
<style>
p{
font-family: "华文彩云";
font-size: 20px;
}
</style>
后代选择器:浏览器为特定的HTML子元素添加CSS样式。
<span id="id">PERFECT</span>
<style>
html body #id{
color: blue;
}
</style>
分组选择器:若CSS样式表内的部分样式相同,可以通过分组选择器简化代码,器名由多个选择器组成,使用逗号分隔。
<span id="id">PERFECT</span>
<span class="class">PERGECT</span>
<style>
#id,.class{
font-family: "华文彩云";
font-size: 20px;
color: blue;
}
</style>
通配符选择器:浏览器为任何HTML元素添加样式。
<span id="id">PERFECT</span>
<span class="class">PERGECT</span>
<p> PERFECT </p>
<style>
*{
font-family: "华文彩云";
font-size: 20px;
color: blue;
}
</style>