标签选择
<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>
伪类选择器
四个伪类选择器顺序不能换文章来源:https://www.toymoban.com/news/detail-538795.html
<style>
/* 超链接访问前的状态 */
a:link{
background-color: red;
}
/* 超链接访问后的状态 */
a:visited{
background-color: yellow;
}
/* 鼠标悬停的状态 */
a:hover{
background-color: aliceblue;
}
/* 点击激活 点击时的状态 */
a:active{
background-color: green;
}
</style>
几个选择器的优先级
id选择器>class选择器>标签选择器文章来源地址https://www.toymoban.com/news/detail-538795.html
到了这里,关于css,类选择器,id选择器,伪类选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!