css常用选择器学习总结

1、基本选择器：标签选择器、类选择器class、id选择器（优先级：id选择器>类选择器class>标签选择器）
标签选择器格式:标签{声明；}
如： h1{color:green;}
类选择器格式：.类名{声明；}              注：可以复用，所有类分组
如：.m1{color:green;}
id选择器格式：#id名{声明；}               注：id全局唯一
如：#m1{color:green}

2、层次选择器:后代选择器、子选择器、相邻兄弟选择器、通用选择器（在同一个父级框内有用）
后代选择器：在某个元素后面，语法：父名 子名{声明；}
body p{
    color:red
    }
子选择器：必须有父子关系才生效，语法：父名>子名{声明；}
body>p{
    color:red
    }
相邻兄弟选择器：对下不对上，与自己相邻的下面一个标签生效，语法.类名+相邻的标签{声明；}
.m1+p{
    color:green;
    }
通用兄弟选择器：对下不对上，自己下面的所有标签生效，语法：.类名~标签{声明；}
.m1~p{
    color:green;
    }

3、结构伪类选择器(使用正则表达式)
父标签下的第一个子元素（某某标签下的第一个子元素，不同子标签不生效）
语法：父标签 子标签：first-child{声明；}
ul li:first-child{
    color:red;
}

父标签下的最后一个子元素（某某标签下的最后一个子元素，不同子标签不生效）
语法：父标签 子标签：last-child{声明；}
ul li:last-child{
    color:red;
}

选择当前子标签（p元素）的父级元素，选中父级元素下的第N个元素，并且是当前子标签元素（p）才能生效（按照顺序排序，如果不是则不生效）
语法：子标签：nth-child(n){声明；}
p:nth-child(1){
    color:red;
}

选中父元素下的子元素的第n个（按照类型排序，数父级下的第N个对应子标签生效）
语法：子标签：nth-of-type(n){声明；}
p:nth-of-type(3){
    color:red;
}

鼠标移动效果：标签：hover{声明；}
.m1:hover{
background:yellow;
}

4、属性选择器
常用符号：绝对等于（=）、包含这个元素（*=）、以这个开头（^=）、以这个结尾（$=）
语法：标签名[属性名=“属性值”]{声明；}

某标签存在某（id）属性的元素
例：a[id]{
           background:yellow;     
       }

a标签中id属性等于first的元素 ; 绝对等于（=）  
例：a[id=first]{
           background:yellow;     
       }

a标签中class属性包含links的元素；包含这个元素（*=）
例：a[class*=links]{
           background:yellow;     
       }

a标签中href属性以http开头的元素；以这个开头（^=）
例：a[href^=http]{
           background:yellow;     
       }

a标签中href属性以pdf结尾的元素；以这个结尾（$=）
例：a[href$=pdf]{
           background:yellow;     
       }