IDEA 选择器及标识符

id选择器
标识符为 #
同一页面不能重名

    <div id="box"></div>
    <style>
    #box{}
    </style>

class 类选择器
标识符为 .
同一页面可以重名，且可拥有多个名字，名字之间用空格隔开

<div class="box">div1</div>
<p class="box box1">div2</p>
<div class="box">div3</div>
    <style>
        .box{
            width:200px;
            height: 300px;
            background: #666;
        }
    </style>

类型选择器
无标识符，直接选择同类所有的标签

<div class="box"></div>
<p class="box box1"></p>
<div class="box"></div>

<style>
        div{
            width:100px;
            height:100px;
            background:red;
        }
        p{
            width:50px;
            height:50px;
            background:blue;
        }
    </style>

包含选择器
id下的id，id下的class，class下的class

<div id="box">
    <p>p1</p>
    <div>p2</div>
</div>
<style>
        #box p{
            width: 50px;
            height:50px;
            background:red;
        }
    </style>

群组选择器
不同标签的共同选择

.div,.p{}

*选择器的优先级
1.行间样式>id>class>类型选择>通配符
2.选择器的优先级一致的情况下，后边的样式会覆盖前边的样式
3.包含选择器中，两个标签大于一个标签。
4.群组选择器中，单独对一种标签的描述大于群组的描述。