1.标签选择器
<style>
div {
border: 5px solid blue;
width: 500px;
height: 200px;
color: burlywood;
}
<div class="font32">我是⼀个div, class为font32</div>
所有的div标签都会被设置成上述设置的式样
2.class选择器
<style>
.font32 {
color: red;
font-size: 32px;
border: blue 5px solid ;
width: 500px;
height: 200px;
margin: 10px;
/* padding: 20px; */
padding-left: 20px;
}
</style>
<div class="font32">我是一个div, class为font32</div>
<div class="font32">我是一个div, class为font32</div>
需要在类之前加上".",来选择所有的类.从而进行渲染
3.id选择器
<style>
#sd{
color: red;
font-size: 32px;
border: blue 5px solid ;
width: 500px;
height: 200px;
margin: 10px;
/* padding: 20px; */
padding-left: 20px;
}
</style>
<div id="sd">我是一个2b class为font32</div>
id选择器需要再id的值前面加上#,来选择进行渲染
4.复合选择器
<style>
.order li {
color: purple;
}
</style>
<div class="order"> 我是一个div,class为order </div>
<li> 我是一个li</li>
复合选择器需要两种即两种以上的标签来进行选择,通常多种标签之间以空格隔开即可
5.通配符选择器
<style>
*{
color:red
}
</style>
使用*来确保选择所有的标签,全部进行渲染