css中的各种选择器的用法

/*标签选择器*/
		div{
            width: 100px;
            height: 100px;
            background: cornflowerblue;
        }
给所有的指定标签设定样式
缺点:会产生冲突
/*class选择器*/
		.public_div{
            width:100%;
        }
        .side{
            width:1000px;
        }
<div id="main" class="public_div side"></div>
side中的width会覆盖public_div中的width
/*id选择器*/
<style>
        #top{
            width:100%;
            height: 32px;
            background:yellow;
        }
        #head{
            width:100%;
            height:100px;
            background:greenyellow;
        }
</style>
<div id="top"></div>
<div id="head"></div>
可以给网页划分结构,但一般给js使用
/*伪类选择器*/
		a:hover{
            color:yellow;
            /*移入*/
        }
        a:link{
            /*一般,清除浏览器缓存时才能看到*/
            color:turquoise;
        }
        a:active{
            /*点击时*/
            color:red;
        }
        a:visited{
            /*访问过(点击过)*/
            color:brown;
        }
/*群组选择器*/

        #head{
            height:100px;
            background:greenyellow;
        }
        #nav{           
            height:130px;
            background: yellow;
        }
        /* #main{           
            height:1000px;
            background:rosybrown;
        } */
        .main{
            height: 1000px;
            background: rosybrown;
        }
        #footer{           
            height:110px;
            background:salmon
        }
        #head,#nav,#footer,.main,p{
            width:1000px;
        }
        p{
            height: 100px;
            background: red;
        }
    
    <div id="head"></div>
    <div id="nav"></div>
    <div class="main"></div>
    <div id="footer"></div>
    <p></p>
		给原有的id选择器,标签选择器和class选择器增加属性
/*通配符选择器*/
		*{
            margin:0px;
            padding:0px;
        }
/*属性选择器*/
		input[type="text"]{
            background:yellowgreen;
        } 
/*包含选择器*/
	div p{
            width:100px;
            height:100px;
            background:purple;
            color:white;
        }
div div p{
            width:100px;
            height:100px;
            background:purple;
            color:white;
        }
包含选择器另一种用法

	#hourse #room .desk p{
            color:white;
    }
	/*#hourse p{
            color:white;
    }*/
	也可
	<div id="hourse">
        <span id="room">
            <div class="desk">
                <p>Powerful</p>
            </div>
        </span>
    </div>

包含选择器可以准确定位元素
/*child选择器*/
		input:first-child{
            background:lawngreen;
        }
        input:last-child{
            background:lightcoral;
        }
		input[name="username"]:last-child{
            background: lightcoral;
        }

有不全面的地方欢迎大家给出指导，希望能给新手带来帮助