CSS常用选择器用法

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>

使用*来确保选择所有的标签,全部进行渲染