标签选择
<link rel="stylesheet" href="123.css" type="text/css">
<style>
@import url(123.css);
</style>
<style>
h1{
color:red;
}
h2{
color: gray;
}
h3{
color: blue;
}
</style>
<h1 style="color: aliceblue;">123123</h1>
class选择器
<style>
.ibm1{
background-color: aqua;
}
.ibm2{
color: red;
background-color: yellow;
}
</style>
<div class="ibm1">123</div>
<!-- ibm1 ibm2同时控制 ,如果ibm1 ibm2中有同样的属性,在style中靠前的被覆盖掉-->
<div class="ibm1 ibm2">456</div>
id选择器
<style>
#box1{
background-color: aliceblue;
}
#box2{
background-color: red;
}
#box3{
background-color: yellow;
}
</style>
<!-- 不能两个标签使用同一个id -->
<div id="box1">123</div>
<div id="box2">456</div>
<div id="box3">456</div>
伪类选择器
四个伪类选择器顺序不能换
<style>
/* 超链接访问前的状态 */
a:link{
background-color: red;
}
/* 超链接访问后的状态 */
a:visited{
background-color: yellow;
}
/* 鼠标悬停的状态 */
a:hover{
background-color: aliceblue;
}
/* 点击激活 点击时的状态 */
a:active{
background-color: green;
}
</style>
几个选择器的优先级
id选择器>class选择器>标签选择器