css選擇器

你們都知道css有不少選擇器，我再這裏總結一下，同時給總結梳理一下知識點 

元素選擇器：會選到html中全部相同元素名的標籤

p{
   font-size:16px;
   font-weight:blod;
}

 

 類選擇器：會應用到具備這個類的元素   .+類名

.head{
         font-size: 16px;
         color:red;
}

   

id選擇器：惟一性   #+id名

#main{
         background-color:gray;
}

 

通配符（*）選擇器   選中body含body標籤裏面的全部標籤

*{
  margin:0;
  padding:0;              
}

 

屬性選擇器     標籤名+[ 屬性名=「屬性值」]

input [type="text"]{
    background-color:red;  
}

 

僞類選擇器         標籤名+：+僞類名

/*未訪問時*/
a:link{}
/*訪問後*/
a:visited{}    
/*鼠標懸停*/
a:hover{}    
/*鼠標點擊下*/
a:active{}

            
僞元素

/*爲了區分僞類和僞元素，css3將僞元素改成了：：*/
a::before{
         content="hello";
}
a::after{
        content="hello";
}
 /*首行*/
 box:first-line{
               background-color:pink;
}
/*首字母*/
box:first-letter{
                 font-weight：normal；
}
li:nth-child(n){
               background:url();
}

 

並集選擇器（組合選擇器）  同時選中多個標籤   用英文逗號隔開

h1,h2,h3,h4{
            font-weight:normal;
} 

 

後代選擇器     選中一個標籤的後代標籤  書寫方式爲一個標籤的標籤名（類名或者id名等其餘方式的選擇器選中）+空格+後代標籤的標籤名（類名或者id名等其餘方式的選擇器選中）

 .box span{
           border:1px solid red;
}

 

子級選擇器   選中所在標籤的子級  選中所在標籤+>+選中子級標籤

.box>span{
                 border:1px solid red;
}