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;
}
原文地址:https://www.cnblogs.com/zms-cyh/p/9348981.html